key与列表的运用

最新推荐文章于 2024-06-01 16:31:18 发布

誰言秋桜

最新推荐文章于 2024-06-01 16:31:18 发布

阅读量55

点赞数

分类专栏：学习笔记 js html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_64948861/article/details/128950074

版权

学习笔记同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

22 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

key的原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    
    <div id="root">
        <!-- 便利数组 -->
        <h2>人员列表</h2>
        <button @click.once="add">点击添加</button>
        <ul>
            <li v-for="(p,index) of persons" :key='p.id'>

                <!-- <li v-for="p in persons" :key='p.id'> -->
                    {{p.name}}-{{p.age}}
                    <input type="text">
            </li>
        </ul>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        
        new Vue({
            el:'#root',
            data:{
                persons:[
                    {id:'001',name:'凤凰',age:16},
                    {id:'002',name:'凤1',age:11},
                    {id:'003',name:'凤2',age:19}
                ]
        },
        methods: {
            add(){
                const p = {id:'004',name:'天气',age:18}
                this.persons.unshift(p)
            }
        },
        })
        </script>

</body>
</html>

思维导图

面试提问

列表过滤

        
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <div id="root">
        <!-- 便利数组 -->
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPerons" :key='index'>


                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示


//用computed实现
   new Vue({
     el:'#root',
     data:{
        keyWord:'',
        persons:[
                    { id: '001', name: '凤凰', age: 16, sex: '女' },
                    { id: '002', name: '周冬雨', age: 11, sex: '女' },
                    { id: '003', name: '林凤娇', age: 19, sex: '女' },
                    { id: '004', name: '周杰伦', age: 19, sex: '男' },
                    { id: '005', name: '姚灶伦', age: 19, sex: '男' }
                ],
     },
     computed:{
        filPerons(){
            return this.persons.filter((p)=>{
                return p.name.indexOf(this.keyWord) !== -1
            })
        }
     }
   })
   </script>

</body>

</html>

列表排序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
   
    <div id="root">
        <!-- 便利数组 -->
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType = 1">年龄升序</button>
        <button @click="sortType = 2">年龄降序序</button>
        <button @click="sortType = 0">原顺序</button>
        <ul>
            <li v-for="(p,index) of filPerons" :key='index'>


                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示

   new Vue({
     el:'#root',
     data:{
        keyWord:'',
        sortType:0, //0是原顺序，1降序，2升序
        persons:[
                    { id: '001', name: '凤凰', age: 16, sex: '女' },
                    { id: '002', name: '周冬雨', age: 11, sex: '女' },
                    { id: '003', name: '林凤娇', age: 19, sex: '女' },
                    { id: '004', name: '周杰伦', age: 19, sex: '男' },
                    { id: '005', name: '姚灶伦', age: 19, sex: '男' }
                ],
     },
     computed:{
        filPerons(){
            const arr = this.persons.filter((p)=>{
                return p.name.indexOf(this.keyWord) !== -1
            })
            //判断是否需要排序
            if(this.sortType){
                arr.sort((p1,p2)=>{
                    return this.sortType === 1 ? p2.age-p1.age : p1.age - p2.age
                })
            }
            return arr
        }
     }
   })
   </script>

</body>

</html>