Vue2（二）绑定样式、条件渲染、列表渲染、监视数据原理

DogEgg_001

已于 2023-08-06 23:29:17 修改

阅读量429

点赞数

分类专栏： Vue2 文章标签： vue.js 前端 javascript

于 2023-07-12 16:11:52 首次发布

本文链接：https://blog.csdn.net/DogEgg_001/article/details/131628957

版权

Vue2 专栏收录该内容

14 篇文章 6 订阅

订阅专栏

一、绑定样式

1.绑定class样式

（1）字符串绑定方式

适用于：样式的类名不确定，需要动态指定

将需要绑定的样式以字符串方式手动指定到一个设立的属性上

    <div class="root">
        <div class="box" :class="style"></div>
        <button @click="changeStyle">点我随机切换样式</button>
    </div>

    <script>
        const vm = new Vue({
            el: '.root',
            data: {
                style: 'style1'
            },
            methods: {
                changeStyle() {
                    const arr = ['style1', 'style2', 'style3']
                    this.style = arr[Math.floor(Math.random() * 3)]
                }
            }
        })
    </script>

（2）数组绑定方式

用于绑定不确定类名、不确定个数的样式

将样式写在数组中，可叠加绑定，利用数组特性，删除样式类用shift()，添加样式类用push()

    <!-- 用于绑定不确定类名、不确定个数的样式 -->
    <div class="root">
        <div class="box" :class="classArr">今天是七月九日</div>
    </div>
    <script>
        const vm = new Vue({
            el: '.root',
            data: {
                classArr: ['style1', 'style2', 'style3']
            },
            methods: {
            }
        })
    </script>

（3）对象绑定方式

用于绑定类名、个数都确定，但需要动态指定的样式

styleObj中的style1设置为true时绑定，为false时不绑定

    <!-- 用于绑定类名、个数都确定，但需要动态指定的样式 -->
    <div class="root">
        <div class="box" :class="classObj">今天是七月九日</div>
    </div>
    <script>
        const vm = new Vue({
            el: '.root',
            data: {
                classObj: {
                    style1: true,
                    style2: true,
                    style3: true
                }
            },
            methods: {
            }
        })
    </script>

2.绑定style样式

常用方式如下（原生js的驼峰命名法）

    <div class="root">
        <div class="box" :style="fstyle">今天是七月九日</div>
    </div>
    <script>
        const vm = new Vue({
            el: '.root',
            data: {
                fstyle: {
                    fontSize: '40px',
                    color: 'darkblue'
                }
            },
            methods: {
            }
        })
    </script>

二、条件渲染

1.v-show渲染方式

v-show="表达式" 表达式为真显示，为假则该标签display="none"

特点：1.适用于频繁更改的标签 2.只是隐藏，标签不会消失 3.

2.v-if渲染方式

v-if="表达式" 表达式为真显示，为假则该标签直接去掉

特点：1.适用于不常更改的标签 2.标签直接被删除

v-if、v-else-if、v-else配合使用，节省渲染时间

这三个一定要写在一起，不然会被打断

三、列表渲染

1.v-for

使用for in或者for of效果都一样，注意对象最好用for in，数组等用for of

（1）遍历数组*

<ul>
    <!-- 列表渲染 -->
    <li v-for="(p,i) in persons" :key="p.sno">{{p.name}}-{{p.age}}---{{i}}</li>
</ul>

（2）遍历对象*

<ul>
    <!-- 对象渲染 -->
    <li v-for="(val,index) of personObj" :key="index">{{val}}--{{index}}</li>
</ul>

（3）遍历字符串

<ul>
    <!-- 字符串渲染 -->
    <li v-for="(val,index) of personObj.str" :key="index">{{val}}-{{index}}</li>
</ul>

（4）遍历指定次数

<ul>
    <!-- 指定次数渲染渲染 -->
    <li v-for="(a,index) of 3" :key="index">{{a}}-{{index}}</li>
</ul>

2.Key原理和作用

虚拟dom对比算法：diff算法

数据改变后，虚拟dom存储新的标签和数据，与改变前的虚拟dom比较，相同的复用，不同的覆盖

key必须作为每条数据的唯一标识

可以用index作为Key，但不能对数据进行逆序删除、添加等破坏数据顺序的操作，只能用于渲染列表作为展示

3.列表过滤

根据案例来体会

搜索关键字自动弹出对应的身份信息，类似于模糊查询

（1）watch方式

    <!-- watch方法 -->
    <div class="root">
        <input v-model="keyWord" type="text" placeholder="请输入名字">
        <ul>
            <li v-for="p in filPersons">{{p.name}}-{{p.age}}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '.root',
            data: {
                keyWord: '',
                persons: [
                    { name: '黄理智', age: 23 },
                    { name: '深刘振', age: 22 },
                    { name: '深井冰', age: 18 }
                ],
                filPersons: []
            },
            watch: {
                keyWord: {
                    // 页面初始渲染时就监视一次
                    immediate: true,
                    handler() {
                        this.filPersons = this.persons.filter((p) => {
                            return p.name.indexOf(this.keyWord) !== -1
                        })
                    }
                }
            }
        })
    </script>

（2）computed方式（正解）

    <script>
        const vm = new Vue({
            el: '.root',
            data: {
                keyWord: '',
                persons: [
                    { name: '黄理智', age: 23 },
                    { name: '深刘振', age: 22 },
                    { name: '深井冰', age: 18 }
                ]
            },
            computed: {
                filPersons() {
                    return this.persons.filter((p) => {
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }
        })
    </script>

使用计算属性filPersons返回一个对象数组，filter()函数过滤满足条件的信息，显然比watch方法更简单易懂

4.列表排序

升序或降序只需在原列表过滤的基础上添加数组排序功能即可

升序：arr.sort((a,b)=>{return a-b})

降序：arr.sort((a,b)=>{return b-a})

四、Vue监测数据变化的原理

1. 不能监测到变化的情况

（1）无法检测通过索引修改数组的操作*

进行按照索引修改数组的操作是不能被Vue2检测到的！实战的时候一定要注意注意！

（2）无法检测数组和对象的新增

还没理解完，放着以后补

2. Vue监测数据的原理

（1）对象监测数据原理

本质就是通过setter监测，如果数据改变，setter就被调用，进行set函数体内的重新解析模板、生成虚拟dom，虚拟dom比较......等等操作

    <script>
        data = { sno: '001', name: 'csq', age: 20 }
        // 创建一个用于监视的实例对象
        const obs = new observer(data)
        // 准备一个vm实例对象
        const vm = {}
        vm._data = data = obs
        
        function observer(obj) {
            const keys = Object.keys(obj)

            keys.forEach((k) => {
                Object.defineProperty(this, k, {
                    get() {
                        return obj[k]
                    },
                    set(val) {
                        obj[k] = val
                    }
                })
            })
        }
    </script>

以上代码就是简单的监测对象数据原理，给对象每个属性都绑定get、set函数，实现监测数据的变化

（2）Vue.set()

Vue.set(target,key,val)

vm.$set(target,key,val)

只能给Vue实例的data内的某一对象添加属性，不能直接添加在vue实例或data属性上

vue官网说明：

（3）数组监测数据原理

**数组没有为索引服务的getter和setter，不能被vue监测到变化

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新

如pop、push、shift、unshift、sort、reverse、splice

数组是一种特殊的对象，所以也可以使用Vue.set()、实例.$set()，键值key是index

（4）数据监测总结

Vue监视数据的原理:
1、vue会监视data中所有层次的数据

2、如何监测对象中的数据?
        通过setter实现监视，且要在new Vue时就传入要监测的数据。

                (1)对象中后追加的属性，Vue默认不做响应式处理

                (2)如需给后添加的属性做响应式，请使用如下API:

                        Vue.set(target，propertyName/index， value) 或

                        vm.$set(target，propertyName/index， value)

3、如何监测数组中的数据?
        通过包裹数组更新元素的方法实现，本质就是做了两件事:

                (1)调用原生对应的方法对数组进行更新

                (2)重新解析模板，进而更新页面。

4.在Vue修改数组中的某个元素一定要用如下方法：

(1)使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

        (2)Vue.set() 或 vm.$set()

特别注意: Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性!!!

DogEgg_001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue2（二）绑定样式、条件渲染、列表渲染、监视数据原理

(1)使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()Vue.set(target，propertyName/index， value) 或。将样式写在数组中，可叠加绑定，利用数组特性，删除样式类用shift()，添加样式类用push()特别注意: Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性!数据改变后，虚拟dom存储新的标签和数据，与改变前的虚拟dom比较，相同的复用，不同的覆盖。
复制链接

扫一扫