Question

我想单独为每个输入激活一个类。我有两个输入绑定到相同的v模型和类。我有一个方法可以检查是否为true，如果为true则启用绑定类。目前，它可以在所有输入上启用该类。（最终目标是在数组中搜索元素的多个输入，如果匹配，则该类仅为该元素激活）

<input v-model="highlightTest" id="1"  v-bind:class="{ active: active }" v-on:keyup="Highlighting"></input>

<input v-model="highlightTest" id="2"  v-bind:class="{ active: active }" v-on:keyup="Highlighting"></input>

Highlighting: function() {
  if (this.highlightTest != '') {
    this.active = true;
} 
else {
this.active = false;
}

Answer 1

这个怎么样：

<template>
    <input v-for="(hi,index) of highlights" v-model="highlights[]" v-bind:class="{ active: highlights[index] }" v-on:keyup="highlighting(index)"></input>
</template>

<script>
export default{
    data() {
        return {
            highlights: []
        };
    },
    created() {
        this.$http.get('some/api').then(res => {
            // map: convert 0,1 to false,true
            this.highlights = res.json().map(h => h==1);
        });
    },
    methods: {
        highlighting(index) {
            if (this.highlights[index]) {
                // this.highlights[index] = false won't let vue detect the data change(thus no view change)
                this.highlights.splice(index, 1, false);
            } else {
                this.highlights.splice(index, 1, true);
            }
        }
    }
}
</script>

Answer 2

这是一种方法（抱歉延迟btw）

HTML：

    <div id="app">
        <p :class="{'active': activateWord(word)}" v-for="word in words">@{{ word }}</p>
        <input type="text" v-model="inputText">

    </div>

CSS：

.active {
    color: red;
}

JS：

const app = new Vue({
    el: '#app',
    data: {
      inputText: '',
      words: [
        'foo',
        'bar'
      ]
    },
    methods: {
      activateWord(word) {
          return this.inputText === word
      },
    },
})

here是一个小提琴

如何激活数组中各个元素的类？ [Vue.js]

2 个答案: