vue實現購物清單列表添加刪除
一、總結
一句話總結：
基礎的v-model操作，以及數組的添加（push）刪除（splice）操作
1、checkbox可以綁定數組，也可以直接綁定值？
綁定數組就是數組控制幾個checkbox（數組的值就是checkbox的值），綁定值就是一個值控制checkbox的選中與否
二、vue實現購物清單列表添加刪除
1、效果圖
2、代碼
html代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>VUE</title> 8 <link rel="stylesheet" type="text/css" href="bootstrap.css"/> 9 <script type="text/javascript" src='js/vue.js'></script> 10 <script type="text/javascript" src='js/axios.js'></script> 11 <script type="text/javascript" src='js/index.js'></script> 12 </head> 13 <body> 14 <div id="my" > 15 <div class="panel panel-info" style="margin:20px;"> 16 <!-- 頭部 --> 17 <div class="panel-heading"> 18 <h1 style="display: inline-block;">我的購物清單列表</h1> 19 <span>清單總數 20 <span class="label label-warning" >{{lists.length}}</span> 21 </span> 22 </div> 23 <!-- 內容 --> 24 <div class="panel-body"> 25 <div class="input-group"> 26 <input class="form-control" v-model="name" type="text"/> 27 <span class="input-group-btn"> 28 <button class="btn btn-primary" @click="add()">添加</button> 29 </span> 30 </div> 31 <table class="table table-striped"> 32 <thead> 33 <tr> 34 <th>清單名稱</th> 35 <th>已采購</th> 36 <th>狀態</th> 37 <th>刪除</th> 38 </tr> 39 </thead> 40 <tbody> 41 <tr v-for="(list,index) in lists"> 42 <td>{{list.name}}</td> 43 <td><input type="checkbox" v-model="list.checked"></td> 44 <td> 45 <span v-if="list.checked">已采購</span> 46 <span v-else>未采購</span> 47 </td> 48 <td><button type="button" class="btn btn-danger btn-sm" @click="del(index)">刪除</button></td> 49 </tr> 50 </tbody> 51 </table> 52 </div> 53 </div> 54 55 </div> 56 </body> 57 </html>
js代碼
1 window.onload = function(){ 2 new Vue({ 3 el:'#my', 4 data:{ 5 name:'', 6 lists:[ 7 {name:'手機',checked:true}, 8 {name:'電腦',checked:false}, 9 {name:'化妝品',checked:false}, 10 {name:'包',checked:true}, 11 ] 12 }, 13 methods:{ //方法 14 add:function () { 15 if(this.name.length<1) alert('物品名稱不能為空'); 16 else{ 17 var goods = { name: this.name, checked: false }; 18 this.lists.push(goods); 19 this.name=''; 20 //console.log(goods); 21 } 22 23 24 }, 25 del:function (index) { 26 this.lists.splice(index, 1) 27 } 28 }, 29 filters:{ //過濾器 30 31 } 32 }) 33 }