Vue品牌案例

最新推荐文章于 2022-11-25 18:52:46 发布

hannah_fire

最新推荐文章于 2022-11-25 18:52:46 发布

阅读量535

点赞数

分类专栏： Vue框架

本文链接：https://blog.csdn.net/weixin_44549556/article/details/103113638

版权

Vue框架专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue完成品牌列表案例

Vue.js

Vue完成品牌列表案例

添加功能

实现效果：
在这里插入图片描述
1、画表格
在vs code的扩展中安装Bootstrap 3 Snippets，就可以使用快捷键bs3-table快速创建表格
2、将model中的数据渲染到表格中。使用v-for循环data中的对象

<tr v-for="item in list" :key="item.id">

3、实现添加功能
使用bs3-panel:primary快速创建面板。点击添加按钮时，获取到id和name文本框的值，将值组合成对象，添加到数组中去。

<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>
                <!-- 在vue中，使用事件绑定机制，为元素指定处理函数时，如果加了小括号，就可以给函数传参 -->
                <input type="button" value="添加" class="btn btn-primary" @click="add()">

            el:'#app',
            data:{
                id: '',
                name: ''
                list:[
                    {id: 1, name: '奔驰', ctime: new Date()},
                    {id: 2, name: '宝马', ctime: new Date()}
                ]
            },
            methods:{
                add(){
                 // 分析：1.获取id和name，直接从data上面获取
                 // 2.组织出一个对象
                 // 3.把这个对象，调用数组的相关方法，添加到当前data上的list中
                 // 4.注意：在vue中，已经实现了数据的双向绑定，每当我们修改了data中的数据，vue会默认监听到数据的改动，自动把最新的数据应用到页面上
                 var car = {id: this.id, name: this.name, ctime: new Date()}
                 this.list.push(car)
                 this.id = this.name = ''  //添加完之后文本框清空
                },

删除功能

1、给删除绑定事件
2、根据id删除数据

<a href="" @click.prevent="del(item.id)">删除</a>

3、写del()方法
some()：用于检测数组中的元素是否满足指定条件

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

splice(): 参数一从第i个位置开始删除，参数二删除几个元素，参数三要插入的数据

del(id){
         //分析： 1.如何根据id，找到要删除这一项的索引
         // 2. 如果找到索引，直接调用数组的splice方法
         this.list.some((item, i) => {
             if(item.id == id){
                 this.list.splice(i,1)
                 //在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
                 return true;
             }
         })

                },

搜索关键字功能

1、之前， v-for中的数据，都是直接从data上的list中直接渲染过来的
2、现在，我们自定义一个search方法，同时把所有关键字，通过传参的形式，传递给search方法
3、在search方法内部，通过执行for循环list内的数据，把所有符合搜索关键字的数据，保存到一个新的数组中，返回

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

时间格式的处理

vue.js允许自定义过滤器，被用作一些常见的文本格式化。过滤器可用在两个地方：mustache插值和v-bind表达式。

过滤器调用的格式

过滤器的定义语法

Vue.filter(‘过滤器的名称’, function(data){})
过滤器中的function，第一个参数，已经被规定死，永远都是过滤器管道符前面传递过来的数据。
过滤器可有多个，可多次调用

过滤器的基本使用

<body>
    <div id="app">
        <p>{{ msg | msgFormat('疯狂', '123') | test}}</p>
    </div>
    <script>
        Vue.filter('msgFormat', function(msg, arg, arg2){
            //字符串的replace方法，第一个参数，除了可写一个字符串之外，还可以定义一个正则
            return msg.replace(/单纯/g, arg+arg2)
        })

        Vue.filter('test', function(msg){
            return msg+'====='
        })

        var vm = new Vue({
            el:'#app',
            data:{
                msg:'曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
            },
            methods:{}
        });
    </script>
</body>

格式化时间的全局过滤器

全局过滤器被所有Vue实例共享
将获取的时间统一变成小写，获取年月日小时分钟秒

<td>{{ item.ctime | dateFormat('yyyy-MM-dd') }}</td>

<script>
        //全局过滤器，进行时间的格式化
        //所谓的全局过滤器，就是所有的vm实例都共享的
        Vue.filter('dateFormat', function(datestr, pattern){
            //根据特定的时间字符串，得到特定的时间
            var dt = new Date(datestr)

            //yyyy-mm-dd
            var y = dt.getFullYear()
            var m = dt.getMonth() + 1
            var d = dt.getDate()           

            if(pattern & pattern.toLowerCase() === 'yyyy-mm-dd'){
                return `${y}-${m}-${d}`
            }
            else{
                var hh = dt.getHours()
                var mm = dt.getMinutes()
                var ss = dt.getSeconds()
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }
            
        })
 </script>

格式化时间的私有过滤器

filters在这里是对象。私有过滤器filters要加s，全局没有s
过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，优先调用私有过滤器

var vm2 = new Vue({
            el: '#app2',
            data:{
                dt: new Date()
            },
            methods: {

            },
            filters: {  //定义私有过滤器  过滤器有两个条件  【过滤器名称和处理函数】
            //过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，优先调用私有过滤器
                dateFormat: function(datestr, pattern = ''){
                var dt = new Date(datestr)
                //yyyy-mm-dd
                var y = dt.getFullYear()
                var m = (dt.getMonth() + 1).toString().padStart(2,'0')
                var d = (dt.getDate()).toString().padStart(2,'0')

            

                if(pattern & pattern.toLowerCase() === 'yyyy-mm-dd'){
                    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}~~~~~`
                }
                }
            }
        })

hannah_fire

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue品牌案例

Vue完成品牌列表案例添加功能实现效果：1、画表格在vs code的扩展中安装Bootstrap 3 Snippets，就可以使用快捷键bs3-table快速创建表格2、将model中的数据渲染到表格中。使用v-for循环data中的对象<tr v-for="item in list" :key="item.id">3、实现添加功能使用bs3-panel:prima...
复制链接

扫一扫