vue实现购物清单列表添加删除
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 }
