<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Vue基础小例子</title>
<style>
#app {
width: 600px;
margin: 10px auto;
}
.tb {
border-collapse: collapse;
width: 100%;
}
.tb th {
background-color: #0094ff;
color: white;
}
.tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
}
.add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="add">
品牌名称:
<input type="text" v-model="name" v-focus />
<input type="button" :disabled="name.length===0" value="添加" @click="addItem" />
</div>
<div class="add">
品牌名称:
<input type="text" placeholder="请输入搜索条件" v-model="searchValue" />
</div>
<div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in filterList" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.date | formatDate }}</td>
<td @click="delItem(index)">
<a href="#">删除</a>
</td>
</tr>
<tr v-if="!filterList.length">
<td colspan="4">没有品牌数据</td>
</tr>
</table>
</div>
</div>
<script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
list: [{
name: "TCL",
date: new Date()
},
{
name: "小米",
date: new Date()
},
{
name: "苹果",
date: new Date()
}
],
name: "",
searchValue: ""
},
filters: {
formatDate(value, params = "YYYY-MM-DD hh:mm:ss") {
return moment(value).format(params);
}
},
methods: {
addItem() {
this.list.unshift({
name: this.name,
date: new Date()
});
this.name = "";
},
delItem(index) {
if (confirm("确定删除此条数据?")) {
this.list.splice(index, 1);
}
}
},
computed: {
filterList() {
if (!this.searchValue) return this.list;
return this.list.filter(item => {
return item.name.startsWith(this.searchValue);
});
}
},
directives: {
focus: {
inserted(dom) {
dom && dom.focus();
}
}
}
});
</script>
</body>
</html>
vue--搜索,添加,删除小案例
最新推荐文章于 2023-02-07 13:48:20 发布