该博客展示了如何使用Vue.js实现一个简单的商品管理界面，包括添加和删除商品的功能。用户可以输入商品名称和价格，点击添加按钮将新商品添加到表格中。商品列表以表格形式展示，并提供删除操作，通过`v-for`指令遍历商品数组并显示，同时利用`v-model`双向绑定数据。删除操作通过`splice`方法实现。
没有使用node.js连接数据库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../vue.js"></script>
<title>Document</title>
<style>
.box {
width: 600px;
height: 500px;
background-color: antiquewhite;
}
.ad {
border-bottom: 1px solid black;
padding-top: 15px;
}
.shopp {
padding-left: 10px;
padding-top: 10px;
}
th,
td {
border: 1px solid brown;
padding: 0;
}
table {
border-collapse: collapse;
width: 500px;
/*设置居中*/
margin: 0 auto;
}
td {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<div class="ad">
<span>商品名称:</span>
<input type="text" v-model.lazy="uname">
<span>商品价格:</span>
<input type="text" v-model.lazy="mone">
<button v-on:click="add">添加</button>
</div>
<div class="shopp">
<table>
<thead>
<th>商品序号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="(item ,inde) in shop">
<td>{{item.id}} </td>
<td>{{item.name}}</td>
<td>{{item.money}}</td>
<td>
<a href="" v-on:click.prevent="del(inde)">{{a}}</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
shop: [],
uname: '',
mone: '',
a: '',
id: '0'
},
methods: {
add: function() {
var id = parseInt(this.id)
if (id > 0) {
id += 1
} else {
id = 0
}
var sp = {};
// 对象加入一个数组
// 先放入一个对象在放入数组就行
sp = {
id: id,
name: this.uname,
money: this.mone
};
this.shop.push(sp);
//console.log(this.shop)
this.a = '删除'
},
del: function(i) {
console.log(i)
this.shop.splice(i, 1)
}
}
})
</script>
</body>
</html>
扫一扫
3477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
