Vue制作电子商城的增删改查功能
项目运行效果截图 复制代码运行不了，需要去Vue官网下载vue.js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
#app {
width: 600px;
margin: 10px auto;
}
a {
list-style: none;
}
.tb {
border-collapse: collapse;
width: 100%;
}
.tb th {
background-color: #0094ff;
color: white
}
.tb th,
.tb td {
padding: 5px;
border: 1px solid black;
text-align: center;
}
.add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
<body>
<div id="app">
<div class="add">
品牌名称：
<input type="text" v-model="itemname" >
<br>
价格：
<input type="text" v-model="price" >
<input type="button" value="添加" @click="addItem()">
</div>
<div class="add">
品牌名称：
<input type="text" placeholder="请输入搜索条件">
</div>
<div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>价格</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in list">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>￥{{item.price}}</td>
<td><a href="javascript:;" @click="deleteItem(index)">删除</a></td>
</tr>
<tr v-if="list.length===0">
<td colspan="4">没有品牌商品</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var list = [{
name: 'TCL电视',
price:2600
}, {
name: '苹果7',
price:3200
}, {
name: '联想笔记本',
price:5600
}, {
name: '小米手机',
price:2300
}
]
var app = new Vue({
el: "#app",
data: {
list,
itemname:'',
price:''
},
methods: {
addItem(){
this.list.unshift({
name:this.itemname,
price:this.price
})
},
deleteItem(index){
if(confirm("Sure")){
this.list.splice(index,1);
}
}
}
})
</script>
</body>
</html>