12.VUE學習之-迴圈li,if判斷示例講解class中應用表示式
阿新 • • 發佈：2019-01-06
功能:
當點選按鍵時,改變當前迴圈數組裡的status裡的值,
判斷staus裡的當前的值來,切換顯示 刪除 和 恢復 的按鈕
判斷staus裡的當前的值來改變span標籤裡的字型顏色樣式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue</title> <link rel="stylesheet" href=""> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script type="text/javascript" src="../js/vue.js"></script> <style type="text/css"> .success{ color: green; } .error{ color:red; } </style> </head> <body> <div id="vue"> <!--迴圈app裡的news--> <li v-for="v in news"> <!--當前陣列v裡的status為ture是就用sucess樣式,否則用error裡的樣式--> <span :class="v.status?'success':'error'">{{v.title}}</span> <!--點選時把當著陣列傳給changeStatus方法,並把要改變的值也傳去,讓其在方法裡改變當前數組裡的值--> <button v-on:click="changeStatus(v,false)" v-if="v.status">刪除</button> <!--判斷有status時才顯示按鈕--> <button v-on:click="changeStatus(v,true)" v-if="!v.status">恢復</button> </li> </div> </body> <script type="text/javascript"> var app=new Vue({ el:'#vue', methods:{ changeStatus:function(item,status){ console.log(item); //item代表傳過來迴圈的當前陣列 console.log(status); //要改變的狀態 item.status=status; //把當前數組裡的status重新賦值 } }, data:{ news:[ {title:'haha',status:true}, {title:'hehe',status:true}, ], }, }); </script> </html>
效果:
