Vue学习笔记九：列表案例
前言
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>
防盗链接：本博客由蜀云泉发表
