Bootstrap的css

table of Contents

Foreword

Vue also learned several chapters, and this time we want to do yourself a demo, a list of additions and deletions can check things change, first of all, we have to use Bootstrap, so good-looking, I now finally understand, is the so-called good-looking the Bootstrap css, Bootstrap form, the form of what is beautiful, beautiful. The interaction of these good-looking tables, forms, and we need a framework for Vue.

Speak true, Bootstrap beauty and Vue does not manipulate DOM with them is really great, take a look at renderings of it

Bootstrap plugin download

Snippets plug-in to download a Bootstrap. This can help us to quickly write Bootstrap, there are 3 and 4, I use version 3

Bootstrap tables and panel

Looked at the renderings, we have to create a new panel and tables Bootstrap these things, you can find all the content in Bootstrap official website

After the above Bootstrap3 Snippets plug-in installed

Enter bs3-panel: primary to quickly create panel

Enter bs3-table: bordered to quickly create tables, table style a lot, you can go to the official website to see what like to add.

Which wrote some of the input panel label

Increasing the data, v-model and v-on

In fact, this we did before, and not that two input boxes, use the v-model command, and then add a button using the v-on instruction to bind a method, the method content is written, is simply this.list. push

Two ways to delete data, and look for the index event modifier

Delete data, that is, a delete button, here I use a label, then use the .prevent event modifier can not afford to make the link a label effect, and then there I was to beautify the delete button, use the button css Bootstrap

Delete data when there is a place to note, is that you remove the installation data index counted, item.id just id, so we have to find an index based on id, there are two ways

One is some method, some methods are also traversed, but when it came true can be stopped, the deletion method list is a list of splice

     this.list.some((item,i)=>{
                    if(item.id==id){
                        this.list.splice(i,1) //删除一个 return true } })

A new method js out, findIndex this is to find a special index

       var index=this.list.findIndex(item=>{
                    if(item.id==id) return true }) this.list.splice(index,1)

Query data, foreach and filter

This query data, there are two methods to traverse and filter

Traversing the data is added to the new list, returns

        var newlist=[]
                 this.list.forEach(item => {
                     if(item.name.indexOf(keywords)!=-1) newlist.push(item) }); return newlist

filter

    return this.list.filter(item=>{
                    if(item.name.includes(keywords)) return item })

All of HTML

Because of the above are added step by step HTML, so I just say the core idea of the above, all of the code posted here, this can copy and paste directly used. Note the comments, which are needed to look at the

<!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>