1.知識點，computed 計算屬性，filter過濾器，返回每一項。，macth在返回的item中匹配一個或多個值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue小案例</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<style type="text/css">
.box {
margin: 0 auto;
width: 70%;
}
.table-bordered>tbody>tr>th,
.table-bordered>tbody>tr>td {
text-align: center;
}
.table>tbody+tbody {
border: 0;
}
</style>
<body>
<div class="box" id="app">
<div class="row">
<div class="data-box">
<form class="form-inline">
<div class="form-group">
<label>name</label>
<input type="text" name="name" class="form-control" v-model="name" />
</div>
<button type="button" class="btn btn-default" @click="add()">添加</button>
<div class="form-group">
<label>搜索</label>
<input type="text" name="sousuo" class="form-control" v-model="keywords" />
</div>
</form>
</div>
<div class="">
<table class="table table-bordered">
<tr>
<th>ID</th>
<th>name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
<tbody id="demo">
<tr v-for="item,index in searchList" :key="item.id">
<td>{{index+1}}</td>
<td v-text="item.name"></td>
<td>{{item.ctime}}</td>
<td>
<!-- click.prevent阻止默認事件 -->
<!-- click.stop阻止冒泡事件 -->
<a href="" @click.prevent="del(index)">刪除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
let time = new Date()
let y = time.getFullYear()
let m = time.getMonth() + 1
let d = time.getDate()
let H = time.getHours()
let min = time.getMinutes()
let myDate = y + '-' + m + '-' + d + '-' + H + ':' + min
let app = new Vue({
el: "#app",
data: {
id: '',
name: '',
keywords: '',
list: [{
name: '小面',
ctime: myDate
},
{
name: '米粉',
ctime: myDate
},
{
name: '牛肉麪',
ctime: myDate
},
{
name: '辣雞粉',
ctime: myDate
}
]
},
methods: {
add() { // 添加的方法
if (this.input()) {
return false
} else {
var car = {
id: this.id,
name: this.name,
ctime: myDate
}
this.list.push(car);
this.id = this.name = '';
}
},
del(index) { // 根據Id刪除數據
// 根據下標刪除,刪除1個
this.list.splice(index, 1);
},
// 判斷input框的值
input() {
let value = document.querySelector('[name=name]').value
if (value == '') {
alert('name不能爲空')
return true
}
}
},
// 計算屬性
computed: {
searchList: function() {
return this.list.filter(item => {
return item.name.match(this.keywords)
})
}
}
})
</script>