数据更改时,Vue不会重新呈现绑定的类

时间:2019-06-27 06:21:28

标签: vue.js dynamic data-binding

数据更改时,Vue不会重新呈现绑定的类

我用默认值声明了数据“ isLoading”,并绑定到html标签中,并且声明了更改数据的方法。

请参见下面的代码!

样式

  .is-red{
    background: red;
  }
  .is-blue{
    background: blue;
  }

脚本

export default {
    created() {
      this.isLoading = true;
    },
    mounted() {

    },
    data() {
      return {
        isloading: true
      };
    },
    methods: {
      changeColor() {
        this.isLoading = !this.isLoading;
        console.log(this.isLoading);
      }
    }
  }

html

<h1 v-bind:class="{'is-blue': isLoading, 'is-red': !isLoading }">hello</h1>
<button @click="changeColor">toggle</button>

我可以在控制台日志中看到数据在“ true”和“ false”之间切换。但是,DOM没有任何变化。

出什么问题了?

2 个答案:

答案 0 :(得分:1)

您用名称isloading声明了变量。 并在created中声明isLoading。Vue将不会观察动态变量的变化。

要更新组件内部的动态变量,请使用Vue.set()this.$set()

您的脚本:

export default {
    mounted() {

    },
    data() {
      return {
        isLoading: true
      };
    },
    methods: {
      changeColor() {
          this.isLoading = !this.isLoading;
      }
   }
}

答案 1 :(得分:0)

尝试如下使用computed

脚本

export default {
    data() {
        return {
            isloading: true
        };
    },
    computed:{
        classes(){
            return this.isloading ? 'is-blue' : 'is-red';
        }
    },
    methods: {
        changeColor() {
            this.isLoading = !this.isLoading;
            console.log(this.isLoading);
        }
    }
}

html

<h1 :class="classes">hello</h1>
<button @click="changeColor">toggle</button>