Question

我想将computed样式应用于输入表单。 documentation解释了如何执行此操作，但仅适用于简单样式。

我需要应用等效的

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

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

逐字使用不起作用：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你能解释一下你的用例吗？使用v-bind:style是你想动态改变某个元素的样式，取决于某些变量，就像在docs中一样，代码改变了CSS取决于isActive和hasError变量：

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

data: {
  isActive: true,
  hasError: false
}

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

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

2 个答案: