vue.js

最新推荐文章于 2024-09-30 16:19:08 发布

`秋刀鱼`

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量142

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/s8459/article/details/127029176

版权

本文详细介绍了Vue.js中的v-for指令，包括如何遍历数组、对象和数字，以及v-for中key的作用。通过实例展示了v-for如何在DOM更新时避免元素复用导致的绑定混乱问题，强调了key属性的重要性。此外，还涵盖了添加和删除数组元素的操作，以及遍历对象的各个属性。

摘要由CSDN通过智能技术生成

vue.js 中v-for指令

v-for 遍历数组：

<body>
    <!-- v-if语法 -->
    <!-- <标签 v-for='item in 数组'></标签> -->
    <div id="app">
        <button @click="add">在尾部添加一个元素</button>
        <ul>
            <!-- 第一个参数是元素，第二个参数是下标，与名字无关 -->
            <!-- 大多时候只是为了拿到元素，可能用不到下标 -->
            <li v-for="(item,index) in list">{{index}}-{{item}}</li>
            <!-- item、index默认参数 -->
            <!-- <li v-for="item in list">{{index}}-{{item}}</li> -->

        </ul>

    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue ({
            el:'#app',
            data:{
                list:['郭富城','刘德华','黎明','张学友']

            },
            methods:{
                add() {
                    this.list.push('浪少')

                }
            }

        })
    </script>
</body>

v-for遍历对象：

<body>
    <!-- v-for指令遍历对象 -->
    <!-- 语法：<标签 v-for="(val,key) in 对象"><标签/> -->
        <!--   <标签 v-for="val in 对象"><标签/> -->
    <div id="app">
        <ul>
            <!-- 对象有多少属性就会产生多少个标签 -->
            <li v-for="item in obj">{{ item }}</li>
            <!-- 第一个参数：属性值 第二个参数：属性名 -->
            <!-- 跟名字无关，也可以简写只拿属性值 -->
            <hr>
            <li v-for="(key,val) in obj">{{ key }}---{{ val }}</li>
        </ul>
    </div>

    <script src="./vue.js"></script>

    <script>
    new Vue({
        el:'#app',
        data:{
            obj:{
                age:19,
                name:'浪少',
                sex:'男',
                height:'175cm'
            }

        }
    })
    </script>
</body>

v-for 遍历数字：

<body>
    <div id="app">
        <!-- 遍历数字(指定次数的循环) -->
        <h2>以下是指定数列</h2>
        <ul>
            <!-- num是1到9 -->
            <li v-for="num in 9"> {{ num }} </li>
        </ul>

    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue ({
            el:'#app',
    
        })

    </script>
</body>

v-for 中key的作用：

<body>
    <div id="app">
        <!-- splice三个参数 分别是:下标从哪里开始删除 删除的数量 要添加的参数  -->
        <button @click="list.splice(1,0,{id:4,name:'大黄'})">添加的元素</button>
        <ul>
            <li v-for="item in list" :key="item.index">
                <input type="checkbox">
                <span>{{ item.name }}</span>
            </li>
        </ul>
    </div>
        <!-- 问题：每当勾选了小白以后，然后在下标1的位置添加了大黄，结果发现勾了大黄，没有勾小白
        原因：v-for会尝试最大限度的复用当前元素，导致状态绑定错乱
        解决：在v-for后加上一个key属性，key绑定这个数据的唯一值(一般是id，不能是字符串和数字类型) -->
    <script src="./vue.js"></script>

    <script>
        new Vue ({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'小红'},
                    {id:2,name:'小白'},
                    {id:3,name:'小花'},
                ]

            }
        })

    </script>
</body>