Vue_条件渲染和列表渲染
一.条件渲染
1.v-if：
v-if=‘name’ ：name值的true 或 false ，决定着这个标签的是否显示
2.v-show：
v-show=‘show’ show的值true 或 false ，决定着这个标签的是否显示
两者的区别：当表达式中值是为false时，v-show是display为none；v-if是直接将这个DOM元素从网页中删除。
3.v-else：
v-else和v-if 成对出现，必须连载一起写，如果中间被其他的DOM隔开，那么将会报错
eg：
<div v-if="show ==='a'">This is A！</div><div v-else-if="show ==='b'">This is B！</div><div v-else>This is C！</div>//当show的值为a时show:'a'
效果：
当我们用v-if和v-else时，如果页面上有相同的DOM元素（input）
key值不同，就会出现渲染相同这种bug了。
二.列表渲染
v-for ='item of list'
为了提高循环显示性能，我们通常会给列表加一个唯一的key值，可以是列表项（前提是不能有重复的），也可以是索引值
v-for=" (item,index) of list ":key='index'
当然，索引值并不是最好的，不推荐，因为在频繁操作DOM元素的时候，很费性能，没办法充分复用DOM节点
一般来说，在开发过程，后台会给数据唯一的标识，例如id，我们可以用它作为key值。
修改列表内容：
不能通过下标来修改，例如vm.list[4] = {id:'001',text:'3333'} 不行
只能通过操作数组的方法来操作数组。有七个方法。
push 在数组末尾追加元素
pop 删除并返回数组的最后一个元素
shift 删除并返回数组的第一个元素
unshift 向数组的开头添加一个或更多的元素，并返回新的长度。
splice 从数组添加或删除项目 ，并返回被删除的项目
sort 数组排序
reverse 颠倒数组中元素的顺序
eg:
我们想要修改数组的第二项
直接操作数组下标：list[1]={is：“222”，text：‘36366’}
数组中的第二项虽然会改变，但是页面不会响应，所以不能用修改下标的方法来做。
如何处理呢？
list.splice(1,1,{is：“222”，text：‘36366’ })
splice从下标为1的元素开始处理，删除长度为1，添加{is：“222”，text：‘36366’}的元素
对象循环
data(){ return{ userInfo:{ name:'Dell', age:'28', gender:'male' }}}
在模板中：
<div v-for ='(item,key,index) of ueserInfo'> { { item}}--{ { key}}--{ { index}} </div>
效果：
对象修改值：
list.userInfo.address = 'beijing'
会在列表添加成功，但是在页面不会显示。
1.可以直接改引用（数组也可以直接改引用）
2.使用set 方法：
类方法：Vue.set()和实例方法 vm.$set()
Vue.set(vm.useInfo,’address’,’beijing’)
这样数据和页面都会发生改变
vm.$set(vm.useInfo,’address’,’beijing’)
数组上set方法：
类方法：Vue.set()和实例方法 vm.$set()
Vue.set(vm.useInfo,1,5) 改变下标为1的元素，改成5.
这样的话在数组和页面都会更新了。
总结：
改变数组有三种方法：
① 通过数组方法，push、pop等七个② 直接改变引用地址③ set 方法(类方法：Vue.set()和实例方法 vm.$set())
改变对象有两个方法：
① 直接改变引用地址② set方法(类方法：Vue.set()和实例方法 vm.$set())
清疚
怼烎@
今天药忘吃喽~
我就是我
还没有评论，来说两句吧...