<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 基本的表格</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
<div id="box">
<div class="page-header">
<h1 style="display: inline-block">{{name}}的购物清单列表</h1>
<span>清单总数<span class="label label-warning">{{items.length}}</span></span>
<span>未采购数<span class="label label-success">{{count}}</span></span>
</div>
<div class="panel">
<div class="input-group">
<input class="form-control" v-model="text" />
<span class="input-group-btn"><button class="btn btn-default" @click="addItem(text)">添加</button></span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>清单名称</th>
<th>已采购</th>
<th>状态</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="(index,item) in items">
<td>{{item.action}}</td>
<td><input type="checkbox" v-model="item.state" v-on:click="changelist()" /></td>
<td>{{item.state}}</td>
<td><button v-on:click="del(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
new Vue({
el:"#box",
data:{
name:"小朋友",
items:[
{action:"外套",state:false},
{action:"保暖衣",state:false},
{action:"夹克男士",state:true},
{action:"化妆品",state:false}
],
text:'',
count:0
},
mounted:function(){
alert(1)
this.changelist()
},
methods:{
addItem:function(text){
if(text=="")return;
this.items.push({action:text,state:false});
this.text='';
this.changelist()
},
changelist:function(){
var _this = this;
_this.count=0;
this.items.forEach(function(element,index){
if(!element.state){
_this.count++;
}
})
},
del:function(index){
if(this.items[index].state==true){
this.items.splice(index,1);
}
}
}
})
}
</script>
</body>
</html>