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>