<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/vue2.6.11.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<div class="form-row form-check-inline">
<div class="col">
<input type="text" class="form-control" placeholder="學名" v-model="name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="生存狀態" v-model="survive">
</div>
<div class="btn-group" role="group">
<button class="btn-primary btn" @click="add">添加</button>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="請輸入查詢內容" v-model="keywords">
</div>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">序號</th>
<th scope="col">學名</th>
<th scope="col">生存狀態</th>
<th scope="col">記錄時間</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="plant in search3()" :key="plant.id">
<td v-cloak>{{plant.id}}</td>
<td v-cloak>{{plant.name}}</td>
<td v-cloak>{{plant.survive}}</td>
<td v-cloak>{{plant.ctime}}</td>
<td>
<button type="button" class="btn btn-outline-danger" @click="del2(plant.id)">刪除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
id: 3,
name: "",
survive: "",
ctime: "",
keywords:"",
plants: [
{id: 1, name: "百山祖冷杉", survive: "已滅絕", ctime: new Date()}
, {id: 2, name: "普陀鵝耳櫪", survive: "已滅絕", ctime: new Date()}
, {id: 3, name: "松樹", survive: "存在", ctime: new Date()}
]
},
methods: {
add() {
this.plants.push({id: ++this.id, name: this.name, survive: this.survive, ctime: new Date()});
}
, del2(id) {
let index = this.plants.findIndex(item => {
if (item.id === id) {
return true;
}
});
this.plants.splice(index, 1);
}
, del3(id) {
let index = this.plants.some((item, i) => {
if (item.id === id) {
this.plants.splice(id, 1);
return true;
}
});
}
,search2(){
let rList=[];
this.plants.forEach(item => {
if (item.name.indexOf(this.keywords)!=-1
|| item.survive.indexOf(this.keywords)!=-1){
rList.push(item);
}
});
return rList;
}
,search3(){
return this.plants.filter(item => {
if (item.name.includes(this.keywords)
|| item.survive.includes(this.keywords)){
return item;
}
});
}
}
});
</script>
</body>
</html>
vueJS 012 crd 簡易
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章