Bootstrap的css

前言

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>

前言