如何在 vue.js 中使用属性选择器？

Question

我想将computed样式应用于输入表单。 该文档解释了如何做到这一点，但仅适用于简单的样式。

我需要申请相当于

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

但我不清楚如何传达[type="text"]位。

逐字使用它不起作用：

 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

您只需要传递样式，而不是 css 选择器，例如：

 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
}

我没有在您的代码中看到您正在根据任何变量更改样式。