序
实现简单的增删改查案例
实现效果
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
th {
background-color: yellow;
}
#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 type="text" v-model="newGoods.name" />
</div>
<div id="">
商品数量<input type="text" v-model="newGoods.count" />
</div>
<div id="">
场地<select name="" v-model="newGoods.made">
<option value="福州">福州</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
</div>
<div>
<button type="button" @click="addGoods">新增</button>
</div>
<hr />
<h3>商品信息</h3>
<div>
<input placeholder="请输入内容" v-model="searchStr" />
<button type="button" @click="searchGoods()">搜索</button>
<button type="button" @click="sort()">升序</button>
<button type="button" @click="reverse()">降序</button>
</div>
<table border="1" cellspacing="0" width="400px" style="text-align: center;">
<tr>
<th>商品名称</th>
<th>数量</th>
<th>场地</th>
<th>操作</th>
</tr>
<!-- 修改弹窗 -->
<tbody>
<tr v-for="(good,index) in goods">
<td>{{good.name}}</td>
<td>{{good.count}}</td>
<td>{{good.made}}</td>
<td>
<button type="button" @click="showGoods(index)">修改</button>
<button type="button" @click="removeGoods(index)">删除</button>
</td>
</tr>
</tbody>
</table>
<div id="pop" v-show="popShow">
<div id="">
商品名称<input type="text" v-model="changeGoodsName"/>
</div>
<div>
<button @click="updateGoods()">修改</button>
<button type="button" @click="closeWindow()">取消</button>
</div>
</div>
</div>
</body>
<script>
var wm = new Vue({
el: "#app",
data: {
changeIndex:0,
popShow:false,
changeGoodsName:'',
searchStr: "",
goods: [{
name: "vivo手机",
made: "福州",
count: 100
},
{
name: "小天鹅洗衣机",
made: "北京",
count: 70
},
{
name: "海尔冰箱",
made: "广州",
count: 60
},
{
name: "小米电视",
made: "上海",
count: 80
}
],
newGoods: {
name: "",
count: 0,
made: "福州"
}
},
methods: {
/*添加商品*/
addGoods: function() {
if (this.newGoods.name == "") {
alert("请输入商品名称");
return;
}
if (this.newGoods.count <= 0) {
alert("商品数量必须大于0");
return;
}
this.goods.unshift(this.newGoods);
this.newGoods = {
name: "",
count: 0,
made: "福州"
}
},
/*删除*/
removeGoods: function(idx) {
this.goods.splice(idx, 1);
},
/*查找*/
searchGoods: function() {
var searchStr = this.searchStr;
this.goods = this.goods.filter(function(item) {
return item.name.match(searchStr);
})
},
/*控制修改弹窗变量*/
closeWindow:function(){
this.popShow=false;
},
showGoods:function(idx){
this.changeIndex=idx;
this.changeGoodsName=this.goods[idx].name;
this.popShow=true;
},
updateGoods:function(){
this.goods[this.changeIndex].name=this.changeGoodsName;
alert('修改成功');
this.popShow=false;
},
sort:function(){
this.goods.sort(function(a,b){return a.count-b.count})
},
reverse:function(){
this.goods.sort(function(a,b){return b.count-a.count})
},
},
watch: {
"searchStr":function() {
if (this.searchStr == "") {
this.goods=[{
name: "vivo手机",
made: "福州",
count: 100
},
{
name: "小天鹅洗衣机",
made: "北京",
count: 70
},
{
name: "海尔冰箱",
made: "广州",
count: 60
},
{
name: "小米电视",
made: "上海",
count: 80
}
]
}
}
}
})
</script>
</html>