class根据状态 vue_vue 动态改变 class 属性

学习vue，做一个小demo，第一步需求是点击相应的色块会变色，再次点击会还原。当时思想是在 data 中用一个数组去记录每个色块的点击状态，在组件上绑定该数组，从而动态改变 class ，但是实际上 class 并没有动态改变。

效果图.png

代码如下：

six-in-nine-vue.html

six-in-nine-vue

:class="{'default-color': !clicked_list[line_idx * 3 + item_idx], 'clicked-color': clicked_list[line_idx * 3 + item_idx]}"

v-for="(item, item_idx) in line"

@click="clickBtn(line_idx * 3 + item_idx)">

{ {item}}

six-in-nine-vue.css

* {

margin: 0;

padding: 0;

}

html,

body {

height: 100%;

}