<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VUE</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css"/>
<script type="text/javascript" src='js/vue.js'></script>
<!-- <script type="text/javascript" src='js/index.js'></script> -->
<script type="text/javascript" src='js/index2.js'></script>
</head>
<body>
<!--
功能：
文本框中输入值，点击添加按钮，将输入的值添加到列表中。列表中的每一行都有删除按钮，点击删除该行
1：获取输入框的值传到js中的变量（v-model），并添加到lists中(this.lists.unshift({name:'',state:''}))
2:遍历显示lists中的值
-->
<div id="my" >
<div class="panel panel-info" style="margin:20px;">
<!-- 头部 -->
<div class="panel-heading">
<h1 style="display: inline-block;">{{userName}}的购物清单列表</h1>
<span>清单总数
<span class="label label-warning" >{{lists.length}}</span>
</span>
</div>
<!-- 内容 -->
<div class="panel-body">
<div class="input-group">
<input class="form-control" type="text" v-model="inputValue"/>
<span class="input-group-btn">
<button class="btn btn-primary" @click="add()">添加</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>清单名称</th>
<th>状态</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in lists">
<td>{{value.name}}</td>
<td>{{value.state}}</td>
<td><button type="button" class="btn btn-danger btn-sm" @click="del(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
window.onload = function(){
new Vue({
el:'#my',
data:{
userName:'朱家润',
inputValue:'',
lists:[
{name:'手机',state:'0'},
{name:'电脑',state:'0'},
{name:'Ipad',state:'0'},
{name:'手表',state:'0'}
]
},
methods:{
add:function(){
this.lists.unshift({name:this.inputValue,state:'0'})
this.inputValue="";
},
del:function(index){
this.lists.splice(index,1);
}
}
});
}
