前端

vue 动态改变 class 属性

2017-12-08  本文已影响674人  warryy

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


效果图.png

代码如下：
six-in-nine-vue.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>six-in-nine-vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="./six-in-nine-vue.css">
</head>
<body>
<div class="wrap" id="js-wrap">
    <div class="w-line" v-for="(line, line_idx) in num_list">
        <div class="w-l-item"
             :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)">
            <div class="item-wrap">
                {{item}}
                <!--{{ clicked_list[line_idx * 3 + item_idx] }}-->
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="six-in-nine-vue.js"></script>

six-in-nine-vue.css

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

.wrap {
    padding: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;

    display: flex;
    flex-direction: column;
}

.w-line {
    flex-grow: 1;
    background-color: #f6f6f6;

    display: flex;
}

.w-l-item {
    flex-grow: 1;
    margin: 5px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.item-wrap {
    color: #fff;
    font-size: 50px;
}

.default-color {
    background-color: #2db4f8;
}

.clicked-color {
    background-color: #2771D4;
}

six-in-nine-vue.js

new Vue({
    el: "#js-wrap",
    data: {
        num_list: [
            ["点我", "点我", "点我"],
            ["点我", "点我", "点我"],
            ["点我", "点我", "点我"]
        ],
        clicked_list:[false,false,false,false,false,false,false,false,false]
    },
    methods: {
        clickBtn: function (idx) {
            this.clicked_list[idx] = !this.clicked_list[idx];
        }
    }
});

这里不能用数组的动态绑定，个人理解：数组 clicked_list[line_idx * 3 + item_idx] 这个实际上是一个指针，当我们改变 data 中该数组的值时，指针指向并没有改变，所以组件没有更新组件状态。有着这个思路，我将该数据改成了对象，这次成功了：

css修改.png
这里的完整 js 代码：
six-in-nine-vue.js 
 new Vue({
    el: "#js-wrap",
    data: {
        num_list: [
            ["点我", "点我", "点我"],
            ["点我", "点我", "点我"],
            ["点我", "点我", "点我"]
        ],
        clicked_list: {
            0: false,
            1: false,
            2: false,
            3: false,
            4: false,
            5: false,
            6: false,
            7: false,
            8: false
        }
    },
    methods: {
        clickBtn: function (idx) {
            this.clicked_list[idx] = !this.clicked_list[idx];
        }
    }
});

这里是该 demo 的改进(可以不看)：
改进点：

  1. 原 demo 可复用性差，用了一个二维数组存储数据，不符合实际情况(后端应该通常只给一个一维数组);
  2. 原 demo 为了使用 flex 布局，将页面进行了双重嵌套，结构复杂；而且如果后端返回小于九个的元素，则布局改变；
    增加功能限制：限制最大点击变色数为6个
    因此加以改进：
    six-in-nine-vue-batter.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>six-in-nine-vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="six-in-nine-vue-better.css">
</head>
<body>
<div class="wrap" id="js-wrap">
    <div class="w-item"
         :class="[isClicked(item_idx) ? 'clicked-color' : 'default-color']"
         v-for="(item, item_idx) in num_list"
        @click="clickItem(item_idx)">
        <div class="item-center">
            {{item}}
        </div>
    </div>
</div>
</body>
</html>
<script src="six-in-nine-vue-batter.js"></script>

six-in-nine-vue-batter.css

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

.wrap {
    box-sizing: border-box;
    height: 100%;
}
.w-item{
    margin-top: 10px;
    margin-left: 10px;
    width: calc((100% - (10px * 4)) / 3);
    height: calc((100% - (10px * 4)) / 3);
    float: left;
    background-color: #3F89EC;

    display: flex;
    justify-content: center;
    align-items: center;
}
.item-center{
    font-size: 50px;
    color: #fff;
}
.default-color{
    background-color: #3F89EC;
}
.clicked-color{
    background-color: #2771D4;
}

six-in-nine-vue-batter.js

new Vue({
    el: "#js-wrap",
    data: {
        num_list: [0, 1, 2, 3, 4, 5, 6, 7],
        clicked_list: [],
        max_clicked: 6
    },

    methods: {
        clickItem: function (idx) {
            var c_clicked_list = this.clicked_list;
            //如果点击块数大于或等于最大点击块数 && 点击的色块未变色: 直接返回
            if (c_clicked_list.length >= this.max_clicked && (c_clicked_list.indexOf(idx) == -1)){
                return
            }
            var listIdx = c_clicked_list.indexOf(idx);
            if (listIdx > -1) {
                this.clicked_list.splice(listIdx, 1);
            } else {
                this.clicked_list.push(idx);
            }
        },
        isClicked: function (idx) {
            return this.clicked_list.indexOf(idx) + 1;
        }
    }
});

效果图：


最终效果.png
上一篇 下一篇

猜你喜欢

热点阅读