Question

更新数据属性不会更新动态类。

尝试通过计算值设置数据属性。

<div class="customize-box" v-on:click="select" v-bind:class="{active: customizeBoxVisible}"></div>
<script>
    export default {
        data() {
            return {
                isSelected: false
            }
        },
        computed: {
            customizeBoxVisible: {
                get() {
                    return this.isSelected;
                },
                set(value) {
                    this.isSelected = value;
                }
            }
       },
       methods: {
            select() {
                this.isSelected = true;
            }
        }
   }
</script>

在chrome开发工具中检查组件数据显示，customBoxVisible设置为true。在开发工具中切换isSelect后，将应用类。

Answer 1

您正在调用选择方法，但从未更改过isSelected数据值。切换isSelected值的正确方法是。

methods: {
    select() {
        this.isSelected = !this.isSelected;
    }
}

Answer 2

结果是我正在从jQuery迁移到Vue.js应用程序，却忘了删除单击处理程序，该处理程序从我的元素中删除了活动类。一切都按预期进行。

为什么Vue v-bind：class不更新？

2 个答案: