<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bootstrap-3.3.7-dist/css/bootstrap.css"></script>
<link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<div>
产品名称：<input type="text" v-model="name">
产品价格：<input type="text" v-model="sex">
产品分类：<input type="text" v-model="group">
<button @click="add" class="btn btn-success">新增数据</button>
</div>
<div>
产品名称查询：<input type="text" v-model="searchName"><br>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr >
<td><input type="checkbox"></td>
<td>产品名称</td>
<td>产品价格</td>
<td>产品分类</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in search(searchName)">
<td><input type="checkbox"></td>
<td>{{user.name}}</td>
<td>{{user.sex}}</td>
<td>{{user.group}}</td>
<td>
<button @click="del(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {sex: '',
name: '',
group: '',
searchName: '',
users: [{name: '自然堂', sex: '200',group:'护肤品'},
{name: '卫衣', sex: '69',group:'服装'},
{name: '阿玛尼', sex: '300',group:'化妆品'},
{name: '三只松鼠', sex: '45',group:'食品'},],},
methods: {
add(){
var user = {
name: this.name,
sex: this.sex,
group:this.group}
this.users.push(user);
},
del(index){
this.users.splice(index, 1);
},
search(s) {
/*filter用来筛选数组中名字中有searchName的元素*/
var resultArray=this.users.filter((user) => {
flag=Object.values(user).join('').includes(s);
return flag;
})
return resultArray;}} })
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
