利用vue.js制作简易商品管理(有代码),项目需求: 1.商品添加功能,使用HTML5表单元素,设计商品添加界面,商品信息包括商品名称、商家、生产日期、保质期等字段。 2.商品搜索功能。 3.商品删除功能
时间: 2024-03-16 09:40:54 浏览: 65
以下是利用Vue.js制作简易商品管理的代码,满足项目需求:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>商品管理</title>
<meta charset="utf-8">
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 商品添加表单 -->
<form v-on:submit.prevent="addProduct">
<label for="name">商品名称:</label>
<input type="text" id="name" v-model="newProduct.name" required><br>
<label for="seller">商家:</label>
<input type="text" id="seller" v-model="newProduct.seller" required><br>
<label for="date">生产日期:</label>
<input type="date" id="date" v-model="newProduct.date" required><br>
<label for="expiry">保质期:</label>
<input type="text" id="expiry" v-model="newProduct.expiry" required><br>
<button type="submit">添加商品</button>
</form>
<hr>
<!-- 商品搜索表单 -->
<form>
<label for="search">搜索:</label>
<input type="text" id="search" v-model="searchText">
<button v-on:click="searchProduct">搜索</button>
</form>
<hr>
<!-- 商品列表 -->
<table>
<thead>
<tr>
<th>商品名称</th>
<th>商家</th>
<th>生产日期</th>
<th>保质期</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(product, index) in filteredProducts">
<td>{{ product.name }}</td>
<td>{{ product.seller }}</td>
<td>{{ product.date }}</td>
<td>{{ product.expiry }}</td>
<td>
<button v-on:click="deleteProduct(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Vue.js代码 -->
<script>
var app = new Vue({
el: '#app',
data: {
newProduct: {
name: '',
seller: '',
date: '',
expiry: ''
},
products: [
{
name: '商品1',
seller: '商家1',
date: '2021-01-01',
expiry: '6个月'
},
{
name: '商品2',
seller: '商家2',
date: '2021-02-01',
expiry: '12个月'
},
{
name: '商品3',
seller: '商家3',
date: '2021-03-01',
expiry: '3个月'
}
],
searchText: ''
},
methods: {
addProduct: function() {
this.products.push(this.newProduct);
this.newProduct = {name:'', seller:'', date:'', expiry:''};
},
deleteProduct: function(index) {
this.products.splice(index, 1);
},
searchProduct: function() {
// 根据关键字过滤商品列表
this.filteredProducts = this.products.filter(product => {
return product.name.indexOf(this.searchText) !== -1;
});
}
},
computed: {
// 过滤后的商品列表
filteredProducts: function() {
return this.products.filter(product => {
return product.name.indexOf(this.searchText) !== -1;
});
}
}
});
</script>
</body>
</html>
```
以上代码实现了商品添加、搜索、删除功能。其中,商品添加使用了HTML5表单元素,商品搜索和删除则使用了Vue.js的方法和计算属性。
阅读全文