Question

我如何使用vuejs创建一个仅更新一次的动态类，类似-

<div v-bind:class:once="{'class1': class1}">

我认为这样会给我带来更好的表现，对吗？

我在小提琴中尝试了以下代码，但是它不起作用（应该是红色背景）

https://jsfiddle.net/5vdczjgt/941/

如何为班级设置一次这样的绑定？

我在Vue 1.x版本中需要它

Answer 1

您可以使用手表和计算方法。我所做的就是注意复选框的更改，一旦更改，请将数据值changedOnce设置为true。如果该复选框在计算的class1方法下再次更改，它将忽略该更改

模板：

 <div id="app">
      <label for="r1">Change colors</label><input type="checkbox" v-model="checkbox" id="r1">
      <br><br>
      <div v-bind:class="{'class1': class1}">
        directiva v-bind:class
      </div>
    </div>

Vue JS：

    new Vue({
    el: '#app',
    data: {
        checkbox: false,
        changedOnce: false
    },
    watch: {
        class1: function() {
            this.changedOnce = true
        },
    },
    computed: {
        class1: function() {
            if (this.changedOnce) {
                return true
            } else {
                if (this.checkbox) {
                    return true
                }
                return false
            }
        }
    }
});

新的JFiddle示例 https://jsfiddle.net/5zpksgq9/

绑定类发生一次

1 个答案: