Vue使用-品牌列表案例-增删过滤器

最新推荐文章于 2024-01-12 16:50:01 发布

Lo、

最新推荐文章于 2024-01-12 16:50:01 发布

阅读量142

点赞数

分类专栏：框架文章标签： bootstrap vue.js 前端

本文链接：https://blog.csdn.net/weixin_44764873/article/details/105517814

版权

框架专栏收录该内容

14 篇文章 0 订阅

订阅专栏

品牌案例-完成品牌列表的添加功能
品牌案例-根据Id完成品牌的删除
品牌案例-根据关键字实现数组的过滤
过滤器-Vue中全局过滤器的基本使用

在这里插入图片描述

引入

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="js/vue.js"></script>

布局

<div id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label for="">
                    Id:
                    <input type="text" class="form-control" v-model="id">
                </label>
                <label for="">
                    Name:
                    <input type="text" class="form-control" v-model="name">
                </label>
                <input type="button" value="添加" class="btn btn-primary" @click="add">
                <label for="">
                    搜索:
                    <input type="text" class="form-control" v-model="words">
                </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 user)" :kwy="item.id"></tr> -->
                <!-- 不可以定死user,定义一个函数，使得搜索关键字可以返回一个新数组 -->
                <tr v-for="item in search(words)" :kwy="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime}}</td>
                    <td>
                        <a href="" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

vue

<script>
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                words: '',
                user: [
                    { id: 1, name: '张三', ctime: new Date() },
                    { id: 2, name: '李四', ctime: new Date() }
                ]
            },
            methods: {
                // 添加
                add() {
                    let newUser = { id: this.id, name: this.name, ctime: new Date() }
                    this.user.push(newUser)
                },
                // 删除 不可以定义delete
                del(id) {
                    this.user.some((item, i) => {
                        if (item.id == id){
                            this.user.splice(i,1)
                            return true;
                        }
                    })
                },
                // 搜索关键字
                search(words) {

                    /*
                    方法一
                    var newUserList = []
                    this.user.forEach((item,i) => {
                        if (item.name.indexOf(words) != -1) {
                            newUserList.push(item)
                        }
                    })
                    return newUserList
                    */

                    //遍历数组：forEach、some、filter、findIndex
                    return this.user.filter(item => {
                        //item.name.indexOf(words) 一个字符串是否包含指定的字符串
                        //es6新增：string.prototype.includes（包含返回true）
                        //jq:$('containss')
                        if(item.name.includes(words)){
                            return item
                        }
                    })

                }
            }
        })
    </script>

过滤器基本使用

<body>
    <div id="app">
       <p>{{ msg | msgfn('cute') | test }}</p>
    </div>
    <script>
        //定义全局的过滤器，名字为msgfn
        Vue.filter('msgfn', function(msg,arg){
             return msg.replace(/可爱/g, arg)
        })
         //定义全局的过滤器，名字为test
        Vue.filter('test', function(msg){
             
        })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: '我可爱吗？什么，难道我不可爱嘛？你最不可爱了！'
            },
            methods: {}
        })
    </script>
</body>

Lo、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue使用-品牌列表案例-增删过滤器

品牌案例-完成品牌列表的添加功能品牌案例-根据Id完成品牌的删除品牌案例-根据关键字实现数组的过滤过滤器-Vue中全局过滤器的基本使用引入<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><script src="js/vue.js"></script>布局<...
复制链接

扫一扫