Vue品牌案例，过滤器应用，bootstrap样式，自定义v-指令

最新推荐文章于 2021-12-12 10:24:12 发布

Python User

最新推荐文章于 2021-12-12 10:24:12 发布

阅读量179

点赞数

分类专栏： Vue基础部分文章标签： vue

本文链接：https://blog.csdn.net/weixin_44684357/article/details/107072208

版权

Vue基础部分专栏收录该内容

33 篇文章 2 订阅

订阅专栏

技术点：
1，各种车其实都是放在列表[]中，所以，添加也是调用add()函数利用v-model进行添加进列表，this.list.push()
2，删除一个也是利用列表的功能，this.list.splice(index, 1)
3，全文检索，写一个search(keywords)函数，在函数里面定义一个新的NewList的空列表，然后在写一个函数返回被搜寻的字段（有两种方法），将这个search返回后在 v-for里面进行遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/vue-2.4.0 .js"></script>
    <title>品牌案例</title>
</head>
<body>
    <div id="app">

        <div class="panel panel-primary">
            <!-- panel-heading为面板的标题 -->
            <div class="panel-heading">
                <!-- 带有title的面板标题 -->
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label>
                    Id:
                    <input type="text" class="form-control" v-model="id">  <!-- form-control为input定义了样式 -->
                </label>
                <label>
                    Name:
                    <!-- 这里的绑定@keyup键盘抬起事件，当按下Enter回车键后出发添加事件add -->
                    <!-- @keyup.后面可以跟enter,tab,delete,esc,space,up,down,left,right，也可以跟键盘码 -->
                    <!-- <input type="text" class="form-control" v-model='name' @keyup.enter = "add"> -->
                    <input type="text" class="form-control" v-model='name' @keyup.f2 = "add">
                </label>
                <input type="button" value="添加" class="btn btn-primay" @click="add()">
                <label>
                    搜索名称关键字:
                    <input type="text" class="form-control" v-model='keywords' v-focus id="Search">
                </label> 
            </div>
        </div>

        <!-- table-bordered为表格添加边框 -->
        <!-- table-hover 鼠标移上有效果 -->
        <!-- able-striped 斑马线表格 -->
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th v-color = "'pink'">Operation</th>
                </tr>
            </thead>
            <tbody>
                <!-- 之前, v-for中的数据，都是直接从data上的list中直接渲染过来额的 -->
                <!-- <tr v-for="item in list" :key=item.id> -->
                <!-- 现在， 自定义一个search方法，同时把所有关键字，通过传参的形式，传递给search方法 -->
                <!-- 在search方法内部通过for吧所有符号关键字保存到一个新数组中，返回 -->
                <tr v-for="item in search(keywords)" :key=item.id>
                    <td v-text='item.id'></td>
                    <td v-text='item.name'></td>
                    <td>{{ item.Ctime | dateFormat('yy-mm-dd') }}</td>
                    <td> 
                        <a href="" @click.prevent="del(item.id)">删除</a>   <!-- 阻止其默认行为 -->
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>

        // 全局的过滤器, 所谓的全局过滤器就是全局都可以共享
        Vue.filter('dateFormat', function(dateStr, pattern) {
            // 根据给定的时间字符串，得到特定的时间
            var dt = new Date(dateStr)

            // 将4:2:3 补充为4:02:03
            // String.padStart(补充的位数，补充哪个数) padStart从前面补，padEnd从后面补
            var y = dt.getFullYear().toString().padStart(2, '0')
            var m = (dt.getMonth() + 1).toString().padStart(2, '0')  // 因为从零开始所以加1
            var d = dt.getDate().toString().padStart(2, '0')

            // return y + '-' + m + '-' + d


            if (pattern.toLowerCase() === 'yyy-mm-dd'){   // toLowerCase() 用于把字符串转化为小写
                return `${y}-${m}-${d}`
            }else{
                var hh = dt.getHours().toString().padStart(2, '0')    
                var mm = dt.getMinutes().toString().padStart(2, '0')
                var ss = dt.getSeconds().toString().padStart(2, '0')
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }
        })

        // 自定义全局案件修饰符
        Vue.config.keyCodes.f2 = 113

        // 前言：利用原生的JS来写 document.getElementById('Search').focus() 这样刷新之后输入框自动触发点击
        // 用Vue来写的话，就得定义全局指令Vue.directive()   如定义: v-focus
        Vue.directive('focus', {   // directive和过滤器的filter类似，全局不加s，局部加s，局部指的是vm的作用域的局部
            bind: function (el){   // 这里的el 表示js原生封装的对象
                // 每当指令绑定到这个元素上的时候，会立即执行这个bind函数，只执行一次
                // 因为，一个元素只有插入DOM之后才能获取焦点，所以 el.focus() 不成功
            },
            inserted: function (el){
                // inserted 表示元素插入到DOM中的时候，会执行inserted函数，【只触发一次】
                el.focus()
            },
            updated: function (el) {
                // 当VNode更新的时候，会执行update，可能会触发多次
            },

        })

        // 自定义一个设置字体颜色的指令
        Vue.directive('color', {           // 可以和 filter一样，可以写进vm的局部里面去
            bind: function (el, binding) {
                el.style.color = binding.value
            },
            // 简写写法，相当于把 
            // 'fontSize': function (el){
            //     el.style.fontSize = parseInt(binding.value) + 'px'
            // }
        })

        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                keywords: '',
                list: [
                    { id: 1, name: '奔驰', Ctime: new Date() },    // new Data() 表示时间
                    { id: 2, name: '宝马', Ctime: new Date() },
                ]
            },
            methods: {
                add(){
                    var newList = this.list.push({id: this.id, name: this.name, Ctime: new Date()})
                },
                del(id){

                    // 删除的第一种方法
                    // some(value,index,array)  看是否满足()内条件之一，满足就返回true
                    // this.list.some( (item, i)=> {   // some方法就是看数组中是否有满足(item, i)的任意条件的，满足的话就返回true
                    //     if (item.id == id){
                    //         this.list.splice(i, 1)
                    //         return true;
                    //     }
                    // })

                    // 删除的第二种方法, 将被选中的ID进行返回
                    var index = this.list.findIndex(item => {
                        if (item.id == id){
                            return true;
                        }
                    })
                    this.list.splice(index, 1)
                },
                search(keywords){

                    // 第一种搜索的方法：forEach和indexOf一块实现
                    // var newListss = []
                    // this.list.forEach(item => {
                        // 如果不等于-1就说明包含在里面
                        // if (item.name.indexOf(keywords) != -1){   // 看index.name中是否包含keywords
                        //    newListss.push(item)
                    //     }
                    // });
                    // return newListss

                    // 第二种搜索的方式：filter和include的方式
                    // forEach, some, filter, findIndex 这些都属于数组的新方法
                    // 都会对数组中的每一项进行遍历进行操作
                    var newListss = this.list.filter( item => {

                        // ES6 中字符串提供了一个新方法，叫做String.prototype.include('要包含的字符串')
                        // 如果包含，则返回true，否则返回false
                        if(item.name.includes(keywords)){
                            return item 
                        }
                    })
                    return newListss  
                }
            },
        })   
    </script>
</body>
</html>

在这里插入图片描述

Python User

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue品牌案例，过滤器应用，bootstrap样式，自定义v-指令

技术点：1，各种车其实都是放在列表[]中，所以，添加也是调用add()函数利用v-model进行添加进列表，this.list.push()2，删除一个也是利用列表的功能，this.list.splice(index, 1)3，全文检索，写一个search(keywords)函数，在函数里面定义一个新的NewList的空列表，然后在写一个函数返回被搜寻的字段（有两种方法），将这个search返回后在 v-for里面进行遍历<!DOCTYPE html><html lang="en
复制链接

扫一扫

专栏目录