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>

未在VUE中添加类

1 个答案: