首頁 > 開發者 > JavaScript
vue.js 嵌套迴圈、if判斷、動態刪除的執行個體，vue.js嵌套
Vue.js是當下很火的一個JavaScript MVVM庫，它是以資料驅動和組件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API
app.html
<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"><title>vuejs 嵌套迴圈、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 >我的學生</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":"學生1","tel":"13681829898",},{"id":"201","name":"學生2","tel":"13681829898",}],},{"id":"138","name":"麻子","tel":"13681829898","status":"0","province":"省","city":"市","sex":"0","stu":[{"id":"300","name":"學生31","tel":"13681829898",},{"id":"301","name":"學生32","tel":"13681829898",}],},{"id":"137","name":"麗麗","tel":"15152882891","status":"0","province":"省","city":"市","sex":"1","stu":[{"id":"400","name":"學生41","tel":"13681829898",},{"id":"401","name":"學生42","tel":"13681829898",}],},{"id":"136","name":"娜娜","tel":"15152882891","status":"0","province":"省","city":"市","sex":"0","stu":[{"id":"500","name":"學生51","tel":"13681829898",},{"id":"501","name":"學生52","tel":"13681829898",}],}] }})})</script></html>
vue1.0和vue2.0迴圈索引使用區別
如果是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 嵌套迴圈、if判斷、動態刪除的執行個體就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
