VUE：條件渲染和列表渲染
阿新 • • 發佈：2018-11-01
條件渲染
<!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>