vue练习之品牌列表案例

最新推荐文章于 2023-07-14 17:54:17 发布

tall羊

最新推荐文章于 2023-07-14 17:54:17 发布

阅读量907

点赞数 3

分类专栏： vue 文章标签： vue includes indexof 全局过滤器

本文链接：https://blog.csdn.net/qq_34448522/article/details/84959012

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

今天做了一个品牌列表案例，一个动图展示今天的学习成果：
在这里插入图片描述这次页面用了bootstrap框架
上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3>添加品牌</h3>
        </div>
        <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" @keyup.enter="add">
          </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>Ctime</th>
           <th>Operation</th>
       </tr>
    </thead>
    <tbody>
    <tr v-for="item in search(keywords)" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.ctime | time('yyyy-mm-dd hh-mm-ss') }}</td>
        <td><a href="" @click.prevent="del(item.id)">删除</a></td>
    </tr>
    </tbody>
</table>
</div>
<script>
    //全局过滤器
    Vue.filter('time',function (data,pattern='') {//如果pattern是未定义类型，则调用toLowerCase会报错
        var dt=new Date(data);
        var y=dt.getFullYear();
        var m=(dt.getMonth()+1).toString().padStart(2,'0');
        var d=dt.getDate().toString().padStart(2,'0');
        var hh=dt.getHours().toString().padStart(2,'0');
        var mm=dt.getMinutes().toString().padStart(2,'0');
        var ss=dt.getSeconds().toString().padStart(2,'0');
        if(pattern.toLowerCase()==='yyyy-mm-dd'){
            return `${y}-${m}-${d}`
        }
        else {
            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }

    })
    var vm=new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            keywords:'',
            list:[
                {id:1,name:'奔驰',ctime:new Date() },
                {id:2,name:'宝马',ctime:new Date() },
            ]
        },
        methods:{
            //添加品牌
             add:function () {
                 var addnew={id:this.id,name:this.name,ctime:new Date()};
                 this.list.push(addnew);
                 this.id=this.name='';
             },
            //根据id删除品牌 方法一
            // del:function (id) {
            //      this.list.some((item,i) => {
            //         if(item.id==id){
            //             this.list.splice(i,1)
            //             return true;
            //         }
            //     })
            // }
            //根据id删除品牌 方法二
            del:function (id) {
               var ind = this.list.findIndex(item=>{
                    if(item.id==id){
                        return true;
                    }
                })
                this.list.splice(ind,1)
            },
            //搜索名称关键字
            search:function (keywords) {
                return this.list.filter(item=> {
                      // return  item.name.indexOf(keywords)!=-1;
                    return item.name.includes(keywords)
                    }
                )
            },

        },
    });

</script>
</body>
</html>

【总结】
1、@keyup .enter='add'：当按enter键按键松开时执行add方法。Vue 为最常用的按键提供了别名。
全部的按键别名：
在这里插入图片描述
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `@keyup.f1`
Vue.config.keyCodes.f1 = 112

2、item in search(keywords)：显示的列表信息是经过搜索名称关键字之后的。如果用item in list，那么显示的是所有的列表信息而不是搜索以后的。

3、push（）：向数组的末尾添加一个或多个元素，并返回新的长度。push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。提示：要想数组的开头添加一个或多个元素，请使用 unshift() 方法。

4、some() ：用于检测数组中的元素是否满足指定条件（函数提供）。some() 方法会依次执行数组的每个元素：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。some() 不会对空数组进行检测。 some() 不会改变原始数组。

5、splice（）：向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。

6、includes（）与indexOf（）比较：
相同点：二者所传的参数是一样的，第一个参数传要判断的元素，第二个参数传开始检索的下标位置
不同点：返回值不同
1、indexOf：返回的是元素的所在下标，如果不存在则返回-1
优点：元素存在可获取到元素的位置
缺点：(1)无法判断是否有NaN的元素(2)返回的值不够语义化，需要我们进行处理
2、includes：返回一个Boolean值，有：true，没有：false
优点：(1)可判断NaN元素(2)返回值十分语义化，不需要再次处理
缺点：无法获取元素的下标

7、findIndex（）：findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1

8、padStart（），padEnd（）：如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。详情见网上一篇总结【感谢此文作者】：padStart()方法,padEnd()方法

tall羊

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
vue练习之品牌列表案例

今天做了一个品牌列表案例，一个动图展示今天的学习成果：这次页面用了bootstrap框架上代码：&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &am
复制链接

扫一扫