Vue2（二）绑定样式、条件渲染、列表渲染、监视数据原理
目录
一、绑定样式
1.绑定class样式
2.绑定style样式
二、条件渲染
1.v-show渲染方式
2.v-if渲染方式
三、列表渲染
1.v-for
（1）遍历数组*
（2）遍历对象*
（3）遍历字符串
（4）遍历指定次数
2.Key原理和作用
3.列表过滤
4.列表排序
四、Vue监测数据变化的原理
1. 不能监测到变化的情况
（1）无法检测通过索引修改数组的操作*
（2）无法检测数组和对象的新增
2. Vue监测数据的原理
（1）对象监测数据原理
（2）Vue.set()
（3）数组监测数据原理
一、绑定样式
1.绑定class样式
（1）字符串绑定方式
适用于：样式的类名不确定，需要动态指定
将需要绑定的样式以字符串方式手动指定到一个设立的属性上
（2）数组绑定方式
用于绑定不确定类名、不确定个数的样式
将样式写在数组中，可叠加绑定，利用数组特性，删除样式类用shift()，添加样式类用push()
今天是七月九日
（3）对象绑定方式
用于绑定类名、个数都确定，但需要动态指定的样式
styleObj中的style1设置为true时绑定，为false时不绑定
今天是七月九日
2.绑定style样式
常用方式如下（原生js的驼峰命名法）
今天是七月九日
二、条件渲染
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）遍历数组*
- {{p.name}}-{{p.age}}---{{i}}
（2）遍历对象*
- {{val}}--{{index}}
（3）遍历字符串
- {{val}}-{{index}}
（4）遍历指定次数
- {{a}}-{{index}}
2.Key原理和作用
虚拟dom对比算法：diff算法
数据改变后，虚拟dom存储新的标签和数据，与改变前的虚拟dom比较，相同的复用，不同的覆盖
key必须作为每条数据的唯一标识
可以用index作为Key，但不能对数据进行逆序删除、添加等破坏数据顺序的操作，只能用于渲染列表作为展示
3.列表过滤
根据案例来体会
搜索关键字自动弹出对应的身份信息，类似于模糊查询
（1）watch方式
- {{p.name}}-{{p.age}}
（2）computed方式（正解）
使用计算属性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比较......等等操作
以上代码就是简单的监测对象数据原理， 给对象每个属性都绑定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的根数据对象 添加属性!!!