代码之家  ›  专栏  ›  技术社区  ›  URL87

绑定类发生一次

  •  0
  • URL87  · 技术社区  · 7 年前

    我如何才能使Vuejs成为一个只更新一次的动态类,比如-

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

    我觉得这样会让我表现得更好,对吗?

    我在小提琴上尝试了以下代码,但它不起作用(应该是红色背景)

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

    我怎么能为全班做这样一次装订?

    我需要Vue 1.x版本

    1 回复  |  直到 7 年前
        1
  •  1
  •   Trevor V    7 年前

    您可以使用手表和计算方法。我所做的是观察复选框的更改,一旦有更改,设置数据值 changedOnce 为真。如果复选框在计算类1方法下再次更改,它将忽略更改

    模板:

     <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/