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>
作者:涛先森の日常
出处:https://www.cnblogs.com/it-taosir/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。