Vue——条件渲染&列表渲染

条件渲染

v-if

　　在三者的后面跟上一个变量，只有当变量值为true时（能够对变量值隐式转换），绑定该条件的元素才显示

　　

v-else-if和v-else

　　能够对多个元素绑定一个变量，当变量的值符合其中之一时，符合条件的元素显示，不然绑定v-else的元素显示

　　

　　注意多个v-if、v-else-if和v-else之间须要紧挨着，不然浏览器会报错

　　

　　

v-show

　　实际上同v-if效果等同，当绑定事件的元素符合引号中的条件时，该元素才显示

　　

　　该方法和v-if区别在于，v-show实际是经过修改DOM元素的display属性来实现节点的显示和隐藏的，而v-if则是经过添加/删除DOM节点来实现的

　　

　　

　　所以，若是须要频繁修改元素的显示/隐藏，则用v-show

key

　　在使用v-if进行页面的条件渲染时，有一个问题就是，Vue会在从新渲染时尽量复用以前渲染过的元素，所以可能形成下面这样的问题

　　

　　页面中输入信息后点击按钮，input里的内容没有清空

　　

　　

　　为了解决这个问题，须要对元素添加key，以告诉Vue这个元素是文档中惟一的

　　

 

列表渲染

　　列表渲染用v-for语句，能够用在同一标签循环建立而内容不一样的时候

　　通常书写方式有如下三种：

数组

　　用in语句遍历（建议用ES6里的of语句），其中遍历到的是数组的项

　　

　　一样是数组，也能够用(item,index) in这种语法格式，其中item为数组项，而index为数组项下标

　　

　　这里每个循环项最好都带一个key值，后续跟的是一个惟一的值（通常会用后端返回的数据中的id）

　　

对象

　　对象能够用key和value来获取每个对象的属性名以及属性值

　　注意这里第一个参数固定接收value，第二个参数固定接收key，第三个参数固定接收index（即这个键值对是对象中的第几个）

　　

注意点

　　不能够经过修改数组下标的形式给数组添加项来改变页面渲染（虽然数组改变，可是页面不会变化）

　　能够操做数组数据而且页面也会相应的方法以下：

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

　　或者改变数据的指向（即改变这个引用类型的引用）

 

　　一样地，对于对象的列表渲染，能够改变已有项的键值使得页面也响应并渲染，但不可添加新的键值对

　　若是须要添加，则须要改变对象的引用

set方法

　　上面提到了对象的列表渲染时添加键值对的问题，Vue中提供了set方法能够解决这个问题

　　set方法接收三个参数，第一个为须要修改的对象名，第二和第三个则为须要添加并渲染的键名和值名

　　

　　set方法也是Vue实例的方法，能够用vm.$set来调用

　　

　　此外，对于数组，也能够用set方法，其中传入的参数同对象的状况相似