Wie verwende ich einen Attributselektor mit vue.js?

Question

Ich möchte einen computed Stil auf ein Eingabeformular anwenden. Die documentation erklärt, wie man das macht, aber nur für einfache Stile.

Ich brauche das Äquivalent von

input[type="text"], textarea { 
    background-color : red; 
} 

anzuwenden, sondern es nicht klar, für mich ist, wie die [type="text"] Bit zu vermitteln.

Mit ihm wörtlich funktioniert nicht:

var vm = new Vue({ 
 
    el: "#root", 
 
    data: { 
 
    password: '', 
 
    }, 
 
    computed: { 
 
    passwordStyle: function() { 
 
     var style = {} 
 
     style['input[type="text"]'] = 'red'; 
 
     style['textarea'] = 'blue'; 
 
     return style; 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> 
 
<div id="root>"> 
 
    <input type="text" name="password" autofocus="true" v-bind:style='passwordStyle'> 
 
</div>

Answer 1

Sie müssen nur den Stil passieren, nicht der CSS-Selektor, wie:

var vm = new Vue({ 
 
    el: "#root", 
 
    data: { 
 
    password: '', 
 
    }, 
 
    computed: { 
 
    passwordStyle: function() { 
 
     return { 
 
     backgroundColor: 'red' 
 
     }; 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> 
 
<div id="root"> 
 
    <input type="text" name="password" autofocus="true" :style="passwordStyle"> 
 
</div>

Answer 2

Können Sie Ihren Anwendungsfall wenig aufwendig erklären, die Verwendung von v-bind:style ist, wenn Sie wollen den Stil ein Element dynamisch ändern , abhängig von einer Variablen, wie in docs, folgenden Code mit Änderung der CSS abhängig von isActive und hasError Variable:

<div class="static" 
    v-bind:class="{ active: isActive, 'text-danger': hasError }"> 
</div> 

data: { 
    isActive: true, 
    hasError: false 
} 

Ich sehe nicht in Ihrem Code ändern Sie Stil basierend auf einer Variablen.