VUE：条件渲染和列表渲染
Posted it-taosir
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE：条件渲染和列表渲染相关的知识，希望对你有一定的参考价值。
条件渲染
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1.条件渲染指令 v-if v-else 移除标签 v-show 通过样式隐藏 2.比较 v-if 与v-show 如果需要频繁切换 v-show 较好 --> <div id="app"> <p v-if="ok">成功了</p> <p v-else>失败了</p> <p v-show="ok">表白成功了</p> <p v-show="!ok">表白失败了</p> <button @click="ok=!ok">切换</button> </div> <script type="text/javascript" src="../js/vue.js" ></script> <script> new Vue({ el:‘#app‘, data:{ ok:false } }) </script> </body> </html>
列表渲染
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1.列表显示 数组：v-for / index 对象：v-for / key 2.列表的更新显示 删除item 替换item --> <div id="demo"> <h2>测试：v-for 遍历数组</h2> <ul> <!-- p:遍历的个体 index：下标--> <li v-for="(p,index) in persons" :key="index"> {{index}}----{{p.name}}----{{p.age}} ----<button @click="deleteP(index)">删除</button> ----<button @click="updateP(index,{name:‘Cat‘,age:20})">更新</button> </li> </ul> <h2>测试：v-for 遍历对象</h2> <ul> <li v-for="(value,key) in persons[1]" :key="key"> {{value}}----{{key}} </li> </ul> </div> <script type="text/javascript" src="../js/vue.js" ></script> <script> //vue本身只是监视了的改变，没有监视数组内部数据的改变 //vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，更新界面） //即vue包含一组观察数组的变异方法，所以他们也将会触发视图更新： //push() pop() shift() //unshift() splice() sort() reverse() //实现思路：重写-更新 new Vue({ el:"#demo", data:{ persons:[ {name:‘Tom‘,age:18}, {name:‘Taosir‘,age:22}, {name:‘moer‘,age:20}, {name:‘Bom‘,age:24}, ] }, methods:{ deleteP(index){ //删除persons中指定的index的p this.persons.splice(index,1); }, updateP(index,newP){ //并没有改变persons本身，数据内部发生了变化，但并没有调用变异方法，vue不会更新 //this.persons[index]=newP; //没有指向persons本身，错！ this.persons.splice(index,1,newP);//删除一个，然后添加 } } }) </script> </body> </html>
以上是关于VUE：条件渲染和列表渲染的主要内容，如果未能解决你的问题，请参考以下文章