Vue學習筆記九：列表案例
目錄
- 前言
- Bootstrap插件下載
- Bootstrap表格和面板
- 增加數據，v-model和v-on
- 刪除數據，事件修飾符和找索引的兩種方法
- 查詢數據，foreach和filter
- 全部的HTML
前言
Vue也學了好幾章了，這次我們要自己來做一個demo，一個列表，能增刪改查的東西，首先，我們得使用Bootstrap，這樣好看，我到現在才終於明白了，所謂的好看就是Bootstrap的css，Bootstrap的表格，表單啥的都漂亮，美。而這些好看的表格，表單的交互，我們需要的是框架Vue。
講真，Bootstrap的美觀和Vue的不操作DOM搭配起來是真的爽啊，先看看效果圖吧
Bootstrap插件下載
先下載一個Bootstrap的Snippets插件，這個可以幫我們快速的寫Bootstrap，有3和4，我用的3版本
Bootstrap表格和面板
看著上面的效果圖，我們要新建Bootstrap的面板和表格，這些東西，你在Bootstrap官網就可以找到全部的內容
安裝了上面的Bootstrap3 Snippets插件之後
輸入bs3-panel:primary 即可快速創建面板
輸入bs3-table:bordered 即可快速創建表格，表格樣式很多，可以去官網看看哪些喜歡就加上。
面板裏面還要寫一些input標簽
增加數據，v-model和v-on
其實這個我們之前做過了，不就是兩個input框，都使用了v-model指令，然後添加按鈕使用了v-on指令綁定一個方法，方法內容也寫過，就是簡單的this.list.push
刪除數據，事件修飾符和找索引的兩種方法
刪除數據，就是一個刪除按鈕，這裏我使用了a標簽，然後使用了.prevent事件修飾符讓a標簽的鏈接不起效，然後還有我為了美化刪除按鈕，用了Bootstrap的按鈕css
刪除數據的時候有一個需要註意的地方，就是你刪除的是安裝索引算的數據，item.id僅僅只是id，所以我們要根據id找索引，有兩種方法
一個是some方法，some方法也是遍歷，但是遇到true的時候可以停止，list列表的刪除方法是splice
this.list.some((item,i)=>{
if(item.id==id){
this.list.splice(i,1) //刪除一個
return true
}
})一個是js出的新方法，findIndex這個專門就是找索引的
var index=this.list.findIndex(item=>{
if(item.id==id)
return true
})
this.list.splice(index,1)查詢數據，foreach和filter
查詢數據這個，方法也有兩個遍歷和過濾
遍歷到數據就添加進新的數組，返回
var newlist=[]
this.list.forEach(item => {
if(item.name.indexOf(keywords)!=-1)
newlist.push(item)
});
return newlist過濾
return this.list.filter(item=>{
if(item.name.includes(keywords))
return item
})全部的HTML
由於上面的都是分步驟加的HTML，所以我幹脆上面講核心思想，代碼全部在這裏貼出，這個可以直接復制粘貼使用了。註意看註釋，註釋都是需要看看的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蜀雲泉</title>
<script type="text/javascript" src="../lib/vue-2.6.10.js"></script>
<link rel="stylesheet" href="../lib/bootstrap.css">
</head>
<body>
<!-- 這個div就是MVVM中的V，View -->
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">蜀雲泉的小列表</h3>
</div>
<!-- form-inline是文字和輸入框在同一行顯示，form-control是設置默認寬度width為100% -->
<div class="panel-body form-inline">
<label>
id:<input type="text" class="form-control" v-model="id">
</label>
<label>
name:<input type="text" class="form-control" v-model="name">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label>
查詢:<input type="text" class="form-control" v-model="keywords">
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>creattime</th>
<th>operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td v-text="item.id"></td>
<td v-text="item.name"></td>
<td v-text="item.creattime"></td>
<td><a href="" @click.prevent="del(item.id)" class="btn btn-danger">刪除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
// 這個vm就是MVVM中的VM，ViewModel
var vm=new Vue({
el: '#app',
// 這個data就是MVVM中的M，Model
data: {
id:'',
name:'',
keywords:'',
list:[
{id:1,name:"蜀雲泉",creattime:new Date().toLocaleString()},
{id:2,name:"許嵩",creattime:new Date().toLocaleString()}
]
},
methods: {
add(){
this.list.push({id:this.id,name:this.name,creattime:new Date().toLocaleString()})
},
del(id){
// 這裏需要註意的是，我們刪除id是不對的，因為索引是從0開始的，所以我們要通過id找到索引
// 通過id找到索引的方法有兩種，我分別介紹一下
// 方法1：some方法
// this.list.some((item,i)=>{
// if(item.id==id){
// this.list.splice(i,1)
// return true
// }
// })
// 方法2：findindex方法
var index=this.list.findIndex(item=>{
if(item.id==id)
return true
})
this.list.splice(index,1)
},
search(keywords){
// 查詢方法也有兩種，方法1
// var newlist=[]
// this.list.forEach(item => {
// if(item.name.indexOf(keywords)!=-1)
// newlist.push(item)
// });
// return newlist
// 方法2
return this.list.filter(item=>{
if(item.name.includes(keywords))
return item
})
}
}
})
</script>
</body>
</html>防盜鏈接：本博客由蜀雲泉發表
Vue學習筆記九：列表案例