css - 如果两个变量与 VueJS 相等，则设置输入类

Question

我想要我的 <input>类设置为 saved当它的值$event.target.value等于我的 Vuex 状态变量 this.$store.state.company.name .

应该怎么设置？

Answer 1

查看 Class and Style Bindings在文档中，您可以将 saved 类绑定(bind)到一个计算属性，该属性检查输入是否等于 Vuex 状态变量，这是一个示例:

new Vue({
    el:"#app",
  data: {
    inputData : '',
  },
  computed: {
    validated(){
        // Here we should compare data from vuex and the user input
        return this.inputData == "mohd"
    }
  }
})

.saved {
  border: 1px green solid;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script>

<div id="app">
  <label> write mohd to validate it</label> 
  <input type="text" :class="{saved: validated}" v-model="inputData">
</div>