Vue: 关于视图刷新与v-bind绑定修改类, 元素标签高亮切换实例总结

此实例是关于利用bool数组, v-for及v-bind对 li 标签进行高亮切换设置时, 由于添加元素和用=号赋值修改元素不触发Vue视图刷新所引发的问题总结

代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .active {
            color: red;
        }
        li {
            cursor: pointer;
        }
    style>
head>
<body>
    
    <div id="app">
        <ul>
            <li v-for="(item, index) in movies" :class="{'active':flag[index]}"
                @click="btnClick(index)">{{index}}-{{item}}li>
        ul>
    div>
    <script src="../js/vue.js">script>
    <script>
        const app = new Vue({
            el: '#app',
            data : {
                flag: [],
                movies: ['海王', '海尔兄弟', '火影忍者', '进击的巨人']
            },
            created() {
                for (let i = 0; i < this.movies.length; i++) {
                    this.flag[i] = false;
                }
                this.flag[0] = true;
            },
            methods: {
                btnClick(index) {
                    for (let i = 0; i < this.movies.length; i++) {
                        this.flag[i] = false;
                    }
                    // this.flag[index] = true;原代码
                    this.$set(this.flag, index, true);
                    // this.flag.push(true);触发vue对数组更新的实别, 刷新视图
                }
            }
        })
    script>
body>
html>

注意点:

  • 我采用了bool数组的方式改变每个 li 的类, 但是注释中原代码未响应, 原因在于 给数组添加新属性 不会刷新视图, 所以后者采用了 $set 设置数组并触发视图刷新

总结视图刷新

  1. 具体参考Vue官网文档, 深入理解MVVM章节
  2. 数组会通过, push, pop, shift, unshift, splice, sort, reverse等数组方法
  3. 以及 this$set(object, key, value)
  4. 或 object = Object.assign({}, this.object )
  5. object = Object.assign({}, this.object , {KEY, VALUE})

你可能感兴趣的:(Vue)