Vue.js是當(dāng)下很火的一個JavaScript MVVM庫，它是以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建的。相比于Angular.js，Vue.js提供了更加簡潔、更易于理解的API
app.html
<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title> vuejs 嵌套循環(huán)、if判斷 </title> <style type="text/css"> [v-cloak] { display: none } </style></head><body> <div id="app"> <table> <tr> <td >id</td> <td >姓名</td> <td >手機號</td> <td >城市</td> <td >通過審核</td> <td >我的學(xué)生</td> <td >操作</td> </tr> <tr v-for="(item,index) in list "> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.tel}}</td> <td>{{item.province}}_{{item.city}}</td> <td v-if="item.status==1">是</td> <td v-else-if="item.status==0">否</td> <td > <span v-for="stu in item.stu "> {{stu.name}}, </span> </td> <td> <button v-on:click="edit">修改</button> <button v-on:click="del(index)">刪除</button> </td> </tr> </table> </div></body><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" charset="utf-8"></script><script src="https://cdn.bootcss.com/vue/2.3.0/vue.min.js" charset="utf-8"></script><script type="text/javascript">$(function() { new Vue({ el: '#app', methods: { del:function(index){ this.list.splice(index,1); }, edit: function () { alert('修改') }, }, data: { "list":[{ "id":"139", "name":"王五", "tel":"13681829898", "status":"1", "province":"省", "city":"市", "sex":"1", "stu":[{ "id":"200", "name":"學(xué)生1", "tel":"13681829898", },{ "id":"201", "name":"學(xué)生2", "tel":"13681829898", }], }, { "id":"138", "name":"麻子", "tel":"13681829898", "status":"0", "province":"省", "city":"市", "sex":"0", "stu":[{ "id":"300", "name":"學(xué)生31", "tel":"13681829898", },{ "id":"301", "name":"學(xué)生32", "tel":"13681829898", }], }, { "id":"137", "name":"麗麗", "tel":"15152882891", "status":"0", "province":"省", "city":"市", "sex":"1", "stu":[{ "id":"400", "name":"學(xué)生41", "tel":"13681829898", },{ "id":"401", "name":"學(xué)生42", "tel":"13681829898", }], }, { "id":"136", "name":"娜娜", "tel":"15152882891", "status":"0", "province":"省", "city":"市", "sex":"0", "stu":[{ "id":"500", "name":"學(xué)生51", "tel":"13681829898", },{ "id":"501", "name":"學(xué)生52", "tel":"13681829898", }], }] } })})</script></html>
vue1.0和vue2.0循環(huán)索引使用區(qū)別
如果是vue1.0這樣寫：<ol> <li v-for="todo in todos" @click="delete($index)"> {{todo.label}} </li></ol>然后：methods:{ delete:function(index){ this.todos.splice(index,1); }}如果是vue2.0這樣寫：<ol> <li v-for="(todo,index) in todos" @click="delete(index)"> {{todo.label}} </li> </ol>然后methods:{ delete:function(index){ this.todos.splice(index,1); }}以上這篇vue.js 嵌套循環(huán)、if判斷、動態(tài)刪除的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
