css - VUE 中未添加类

Question

我有一个输入文件，当输入它时，我有一个检查输入字符串长度的方法，这工作正常，但我现在想根据字符串的长度添加一个类。

这是我的模板元素:

<input v-model=“categoryTitle” v-bind:class="{ ‘passed’: isPassed }" @keyup=“addName” type=“text” name=“desc” id=“desc” value="" data-original="" placeholder="">

这是我的数据和方法:

data:{
categoryTitle:’’,
isPassed:false,
},
methods: {

        addName(){

            if(this.categoryTitle.length < 100 && this.categoryTitle.length > 0){
                this.isPassed = true;
            }

        },

    }

但是什么都没有发生，我做错了什么？我对 VUE 还是很陌生，所以我确定这是一个菜鸟错误。

Answer 1

只需将 isPassed 设为计算属性即可:

computed: {
  isPassed() {
    let length = this.categoryTitle.length;
    return length < 100 && length > 0;
  }
}

这样您就不需要通过监听输入事件来更新属性。当从属 categoryTitle 属性的值发生变化时，计算属性将自动更新。

这是一个工作示例:

new Vue({
  el: '#app',
  data() {
    return { categoryTitle: '' }
  },
  computed: {
    isPassed() {
      let length = this.categoryTitle.length;
      return length < 100 && length > 0;
    }
  }
})
  

.passed { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<div id="app">
  <input v-model="categoryTitle" v-bind:class="{ passed: isPassed }">
</div>