Vue2学习笔记（列表渲染）

知远同学

已于 2023-12-04 16:09:58 修改

阅读量651

点赞数 11

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：学习笔记

于 2023-12-04 11:22:21 首次发布

本文链接：https://blog.csdn.net/weixin_47401101/article/details/134779707

Vue 专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍了Vue中v-for指令的使用方法，包括遍历数组和对象，以及如何通过watch和computed实现列表的过滤功能。通过实例展示了key的原理和其在动态数据更新中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例由浅到深，逐步深入。

一、案例1：v-for的使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!--遍历数组-->
        <h2>人员列表</h2>
        <ul>
            <li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li>
        </ul>

        <!--遍历对象-->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value,key) in car" :key="key">{{value}}--{{key}}</li>
        </ul>
    </div>
</body>
<!--p.id是动态绑定ID，给每个li都加上了ID -->
<script type="text/javascript" :key="p.id">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el:"#root",
        data:{
            persons:[
                {id:1,name:"张三",age:18},
                {id:2,name:"李四",age:19},
                {id:3,name:"王五",age:20},
            ],
            car:{
                name:"奥迪A8",
                price:"70万",
                color:"black"
            }
        }
    })
</script>
</html>

二、key的原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>key的原理</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 in persons" :key="p.id">{{p.name}}-{{p.age}}
            <input type="text">
        </li>
        </ul>
    </div>
</body>

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

    new Vue({
        el:"#root",
        data:{
            persons:[
                {id:1,name:"张三",age:18},
                {id:2,name:"李四",age:19},
                {id:3,name:"王五",age:20},
            ]
        },
        methods:{
            add(){
                const p = {id:"4",name:"老刘",age:21}
                this.persons.unshift(p)
            }
            
        }
    })
</script>
</html>

三、列表过滤，可以通过watch和computed两种方法实现

1、watch方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤</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 in filPersons" :key="p.id">{{p.name}}-{{p.age}}--{{p.sex}}</li>
        </ul>
    </div>
</body>
<!--p.id是动态绑定ID，给每个li都加上了ID -->
<script type="text/javascript" :key="p.id">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    // 用watch实现
    new Vue({
        el:"#root",
        data:{
            keyword:"",
            persons:[
                {id:1,name:"马冬梅",age:18,sex:"女"},
                {id:2,name:"周冬雨",age:19,sex:"女"},
                {id:3,name:"周杰伦",age:20,sex:"男"},
                {id:4,name:"温兆伦",age:32,sex:"男"},
            ],
            filPersons:["",]
        },
        watch:{
            keyword:{
                immediate:true,
                handler(val){
                    this.filPersons = this.persons.filter((p)=>{
                        return p.name.indexOf(val) !==-1
                    })
                }
            }
        }
    }) 
</script>
</html>

2、computed方法实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤</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 in filPersons" :key="p.id">{{p.name}}-{{p.age}}--{{p.sex}}</li>
        </ul>
    </div>
</body>
<!--p.id是动态绑定ID，给每个li都加上了ID -->
<script type="text/javascript" :key="p.id">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    // 用computed实现
    new Vue({
        el:"#root",
        data:{
            keyword:"",
            persons:[
                {id:1,name:"马冬梅",age:18,sex:"女"},
                {id:2,name:"周冬雨",age:19,sex:"女"},
                {id:3,name:"周杰伦",age:20,sex:"男"},
                {id:4,name:"温兆伦",age:32,sex:"男"},
            ],
        },
        computed:{
            filPersons(){
                return this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyword) !== -1
                })
            }
        }
        
    })
</script>
</html>