0
点赞
收藏
分享

微信扫一扫

Vue列表相关

勇敢乌龟 2022-01-13 阅读 44

1. 原理:虚拟DOM Diff算法
2. 不能用index可能引起的问题:若进行逆序添加,逆序删除等破坏顺序操作会产生没有必要的新的真是DOM更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <input type="text" placeholder="请输入查询信息" v-model="keyWords">
    <ul>
        <!--        用遍历去生成同样结构的数据,必须给每一个打上标识-->
        <li v-for="(person,index) of filterPerson" :key="index">
            {{person.name}}-{{person.age}}-{{person.sex}}
        </li>
    </ul>
</div>
<script>
    Vue.config.productionTip = false;
    // 1. 监视watch写法
    new Vue({
        el:'#root',
        data: {
            keyWords:'',
            persons: [
                {id: '01', name: '张月', age: 21, sex: '男'},
                {id: '02', name: '张月1', age: 22, sex: '女'},
                {id: '03', name: '张月2', age: 23, sex: '男'},
                {id: '04', name: '张月3', age: 24, sex: '女'}
            ],
            filterPerson: []
        },
        watch: {
            keyWords:{
                immediate: true,
            // 判断keywords里的关键词
            handler(val) {
                // 过滤出含有keywords的数据
    		// filter:一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。
                this.filterPerson = this.persons.filter((person)=>{
                    // 获取判断结果
                    return person.name.indexOf(val) !== -1;
                })
            }
        }
        }
    })
    // 2.计算属性computed写法
    // new Vue({
    //     el:'#root',
    //     data: {
    //         keyWords:'',
    //         persons: [
    //             {id: '01', name: '张月', age: 21, sex: '男'},
    //             {id: '02', name: '张月1', age: 22, sex: '女'},
    //             {id: '03', name: '张月2', age: 23, sex: '男'},
    //             {id: '04', name: '张月3', age: 24, sex: '女'}
    //         ]
    //     },
    //    computed:{
    //         filterPerson(){
    //             // 过滤
    //             return this.persons.filter((person)=>{
    //                 return person.name.indexOf(this.keyWords) !== -1
    //             })
    //         }
    //    }
    // })
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <input type="text" placeholder="请输入查询信息" v-model="keyWords">
    <button @click="sortThis = 2">年龄升序</button>
    <button @click="sortThis = 1">年龄降序</button>
    <button @click="sortThis = 0">重置</button>
    <ul>
        <!--        用遍历去生成同样结构的数据,必须给每一个打上标识-->
        <li v-for="person in filterPerson" :key="person.id">
            {{person.name}}-{{person.age}}-{{person.sex}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el:'#root',
        data: {
            keyWords:'',
            sortThis: 0,
            persons: [
                {id: '01', name: '张月', age: 21, sex: '男'},
                {id: '02', name: '张月1', age: 22, sex: '女'},
                {id: '03', name: '张月2', age: 23, sex: '男'},
                {id: '04', name: '张月3', age: 24, sex: '女'}
            ]
        },
           computed:{
                filterPerson(){
                    // 过滤
                    const arr = this.persons.filter((person)=>{
                        return person.name.indexOf(this.keyWords) !== -1
                    })

                    if(this.sortThis) {
                        arr.sort((a,b)=>{
                            return this.sortThis === 1 ? a.age-b.age : b.age-a.age
                        })
                    }
                    return arr
                }
           }

    })
</script>
</body>
</html>
举报

相关推荐

0 条评论