列表渲染 v-for

qq_40051569

于 2023-03-08 11:59:56 发布

阅读量60

点赞数

分类专栏：前端 vue 文章标签：前端 java vue.js

本文链接：https://blog.csdn.net/qq_40051569/article/details/129400626

版权

前端 vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

列表渲染 v-for

在这里插入图片描述

<body>
    <div id="app">
        <h2>人员列表</h2>
        <ul>
            <!-- 遍历数组 -->
            <li v-for="p in persons" :key="p.id">
                {{p.name}}--{{p.age}}
            </li>
            <!-- <li v-for="(p,index) in persons" :key="index">
                {{p.name}}--{{p.age}}
            </li> -->
            <!-- 遍历对象 -->
            <!-- value是值，k是属性名称 index系统生产id 0，1，2-->
            <li v-for="(value,k,index) in car" :key="k">
                {{value}}--{{k}}-{{index}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                persons:[
                    {id:'001',name:'张三',age:'13'},
                    {id:'002',name:'赵四',age:'121'},
                    {id:'003',name:'王五',age:'121'},
                ],
                car:{
                    name:"车",
                    inde:'abc'
                }
            },
        })
    </script>
</body>

列表渲染的原理

用ｉｎｄｅｘ　作为：ｋｅｙ

在数据生成虚拟ｄｏｍ的时候，会与旧的虚拟ｄｏｍ对比，
ｋｙｅ相同，ｉｎｐｕｔ所有标签相同，
直接复用原始虚拟ｄｏｍ的ｖａｌｕｅ值
在这里插入图片描述

用id　作为：ｋｅｙ

避免重复，重复key值复用，不重复的key 创建新的真是dom
在这里插入图片描述

<body>
    <div id="app">
        <h2>人员列表</h2>
        <!-- 按钮一次性 once -->
        <button @click.once="add"> 添加一个老刘</button>
        <ul>
            <!-- 遍历数组 key给节点做标识，key在页面上看不到被vue征用了-->
            <li v-for="p in persons" :key="p.id">
                {{p.name}}--{{p.age}}
                <input type="text">
            </li>
            <!-- 有问题，增加一个的时候，index做key会出错 -->
            <!-- <li v-for="(p,index) in persons" :key="index">
                {{p.name}}--{{p.age}}
                <input type="text">
            </li> -->
        </ul>
    </div>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                persons:[
                    {id:'001',name:'张三',age:'13'},
                    {id:'002',name:'赵四',age:'121'},
                    {id:'003',name:'王五',age:'121'},
                ],
            },
            methods: {
                add(){
                    const p = {id:'004',name:'老刘',age:40}
                    // 向数组头插入一条数据
                    // this.persons.unshift(p)
                    // 向数组结尾插入
                    this.persons.push(p)

                }
            },
        })
    </script>
</body>

在这里插入图片描述

列表过滤

<div id="app">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入姓名" v-model="keyWoder">
        <ul>
            <!-- 遍历数组 -->
            <li v-for="p in filPersons" :key="p.id">
                {{p.name}}--{{p.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // 用watch实现
        // new Vue({
        //     el:'#app',
        //     data:{
        //         persons:[
        //             {id:'001',name:'马冬梅',age:13,sex:'女'},
        //             {id:'002',name:'周冬雨',age:121,sex:'女'},
        //             {id:'003',name:'周杰伦',age:121,sex:'男'},
        //             {id:'004',name:'温兆伦',age:21,sex:'男'},
        //         ],
        //         filPersons:[],
        //         keyWoder:''
        //     },
        //     watch:{
        //         keyWoder:{
        //             immediate:true,
        //             handler(val){
        //                 this.filPersons = this.persons.filter((p)=>{
        //                     return p.name.indexOf(val) !== -1
        //                  // return p.age > 14
        //                 })
        //             }
        //         }
        //     }
        // })

        // 计算属性computed实现
        new Vue({
            el:'#app',
            data:{
                persons:[
                    {id:'001',name:'马冬梅',age:13,sex:'女'},
                    {id:'002',name:'周冬雨',age:121,sex:'女'},
                    {id:'003',name:'周杰伦',age:121,sex:'男'},
                    {id:'004',name:'温兆伦',age:21,sex:'男'},
                ]
                ,
                keyWoder:''
            },
            // 计算属性，初始化时调用一次；依赖的属性变化，也会调用
            computed:{
                filPersons(){
                    return this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWoder) !== -1
                    })
                }

            }
        })
    </script>

列表排序

<div id="app">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入姓名" v-model="keyWoder">
        <button @click="buttonNums = 0">原顺序</button>
        <button @click="buttonNums = 1">降序</button>
        <button @click="buttonNums = 2">升序</button>
        <ul>
            <!-- 遍历数组 -->
            <li v-for="p in filPersons" :key="p.id">
                {{p.name}}--{{p.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">

        // 计算属性computed实现
        new Vue({
            el:'#app',
            data:{
                buttonNums:0,
                persons:[
                    {id:'001',name:'马冬梅',age:13,sex:'女'},
                    {id:'002',name:'周冬雨',age:12,sex:'女'},
                    {id:'003',name:'周杰伦',age:21,sex:'男'},
                    {id:'004',name:'温兆伦',age:11,sex:'男'},
                ]
                ,
                keyWoder:''
            },
            // 计算属性，初始化时调用一次；依赖的属性变化，也会调用
            computed:{
                filPersons(){
                    const nums =  this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWoder) !== -1
                    })
                    // 排序
                    if(this.buttonNums){
                        console.log(this.buttonNums)
                        nums.sort((a,b)=>{
                            // 前面减去后面升序，后面减去前面，降序
                            return this.buttonNums === 1 ? a.age-b.age : b.age-a.age
                        })
                    }
                    return nums
                }

            }
        })
    </script>