代码块（点击展开）：
<html>
<head>
<meta charset="utf-8" />
<title>第六周-StroemManageSystem</title>
<style type="text/css">
#pop{
position: absolute;
left:40%;
top: 200px;
z-index: 999;
background-color: rgba(0,0,0,.3);
width: 380px;
height: 100px;
padding: 20px;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h3>商品管理系统</h3>
<div id="">
商品数量<input v-model.number="newGoods.count"/>
</div>
<div id="">
商品名称<input v-model="newGoods.name"/>
</div>
<div id="">
商品场地场地<select v-model="newGoods.made">
<option value ="福州">福州</option>
<option value ="北京">北京</option>
<option value ="苏州">苏州</option>
</select>
</div>
<div id="">
<button type="button" @click="addGoods()">新增</button>
</div>
<hr >
<h3>商品信息</h3>
<div>
<input placeholder="请输入内容" v-model="searchStr" />
<button type="button" @click="searchGoods()">搜索</button>
</div>
<hr >
<table border="1" cellspacing="0" width="400px">
<thead style="background-color: yellow;">
<tr>
<th>商品名称</th>
<th>数量</th>
<th>场地</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="item" v-for="(good,index) in goods">
<td>{{good.name}}</td>
<td>{{good.count}}</td>
<td>{{good.made}}</td>
<td>
<button type="button" v-on:click="showGoods(index)">修改</button>
<button type="button" v-on:click="removeGoods(index)">删除</button>
</td>
</tr>
</tbody>
</table>
<div id="pop" v-show="popShow">
<div id="">
商品名称<input v-model="changeGoodsName"/>
</div>
<div>
<button type="button" @click="showGoods">修改</button>
<button type="button" @click="closeWindow">取消</button>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
goods: [
{
name:"vivo-phone",
count:100,
made:"福州"
},
{
name:"小米手机",
count:80,
made:"北京"
},
{
name:"海尔冰箱",
count:60,
made:"苏州"
}
],
newGoods:{
name:"",
count:0,
made:"福州"
},
searchStr:"",
changeGoodsName:"",
popShow:false
},
methods: {
addGoods:function(){
if(this.newGoods.name == ""){
alert("请输入商品名称");
return;
}
if(this.newGoods.name <= 0){
alert("商品数量必须大于零");
return;
}
this.goods.unshift(this.newGoods);
this.newGoods = {
name:"",
count:0,
made:"福州"
}
},
removeGoods:function(idx){
this.goods.splice(idx,1);
},
showGoods:function(idx){
this.changeGoodsName = this.goods[idx].name;
this.popShow = true;
},
closeWindow:function(idx){
this.popShow = false;
},
searchGoods:function(){
var searchStr = this.searchStr;
this.goods = this.goods.filter(function(item){
return item.name.match(searchStr);
})
}
},
// watch:用于监听data里面的数据是否被修改，一旦修改就可以执行一些其他的操作【也是方法】
watch: {
"searchStr":function(){
if(this.book == ''){
this.goods = [
{
name:"vivo-phone",
count:100,
made:"福州"
},
{
name:"小米手机",
count:80,
made:"北京"
},
{
name:"海尔冰箱",
count:60,
made:"苏州"
}
]
}
}
}
})
</script>