<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">新增品牌</h3>
</div>
<div class="panel-body form-inline">
<label for="">
ID:
<input type="text" v-model='id' name="" id="">
</label>
<label>
Name
<input type="text" v-model='name' name="" id="input" class="form-control" value=""
required="required" pattern="" title="">
</label>
<button type="button" @click='add' class="btn btn-primary">新增</button>
<label for="input-id">
搜尋關鍵字
<input v-model="keywords" type="text" name="" id="input" class="form-control"
required="required" >
</label>
</div>
</div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>ctime</th>
<th>opt</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td><a href="" @click.prevent='del(item.id)'>刪除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{ 'id': 1, 'name': '賓士', 'ctime': new Date() },
{ 'id': 2, 'name': '寶馬', 'ctime': new Date() },
],
keywords: ''
},
methods: {
// 搜尋
search(keywords){
// 過濾符合條件的新陣列
return this.list.filter(item=>{
// 字串包含返回true
if(item.name.includes(keywords))
return item
})
},
// 新增
add() {
let car = { 'id': this.id, 'name': this.name, 'ctime': new Date() }
this.list.push(car)
this.name = this.id = ''
},
// 刪除
del(id) {
// some()是對陣列中每一項執行給定函式，如果該函式對任一項返回true，則返回true
this.list.some((item, index) => {
if (item.id === id) {
this.list.splice(index, 1)
return true
}
})
// findIndex方法返回傳入一個測試條件（函式）符合條件的陣列第一個元素位置
// let index = this.list.findIndex(item => {
// if (item.id == id)
// return true
// })
// this.list.splice(index, 1)
}
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
本作品採用《CC 協議》，轉載必須註明作者和本文連結