vue.jsで属性セレクタを使用するには？

Question

computedスタイルを入力フォームに適用したいと思います。 documentationでは、その方法を説明していますが、単純なスタイルの場合にのみ説明します。

私は[type="text"]ビットを伝えるためにどのように私のために明確ではありません

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

が、と同等のものを適用する必要があります。それがそのまま動作しません使用

：

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

：これは本当です

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

あなたが動的にいくつかの要素のスタイルを変更したいときは、精巧あなたのユースケースを少し説明することができ、v-bind:styleの使用でありますいくつかの変数に応じて、ドキュメントにあるように、コードを変更して、CSSをisActiveとhasErrorに応じて変更します。

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

data: { 
    isActive: true, 
    hasError: false 
} 

あなたのコードでは、変数に基づいてスタイルを変更していません。あなたが好きなだけで、スタイルではなく、CSSセレクタを渡す必要が