首页 > Web开发 > 详细

Bootstrap的css

时间:2019-10-14 01:31:44      阅读:182      评论:0      收藏:0      [点我收藏+]

前言

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>

Bootstrap的css

原文:https://www.cnblogs.com/xtxt1127/p/11669119.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!