Vue.js学习（七：v-for）

最新推荐文章于 2023-09-10 13:52:17 发布

飞翔荷兰号

最新推荐文章于 2023-09-10 13:52:17 发布

阅读量315

点赞数

文章标签： javascript vue

本文链接：https://blog.csdn.net/weixin_43374578/article/details/104178906

版权

1. v-for取数组中元素(对象中属性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="first">
    <!--1.1 v-for获取数组中元素-->
    <ul>
        <li v-for="item in names">{{item}}</li>
    </ul>
    <!--1.2 v-for获取数组中元素和下标: index是固定的，item可随意写-->
    <ul>
        <li v-for="(item,index) in names">{{index}}.{{item}}</li>
    </ul>

    <!--2.1 v-for获取对象中value-->
        <!--获取多个值时，顺序不能变-->
    <ul>
        <li v-for="item in info">{{item}}</li><!--item随意写，拿到的是value-->
    </ul>
    <!--2.2 v-for获取对象中value，key-->
    <ul>
        <li v-for="(value,key) in info">{{key}}:{{value}}</li><!--value和key必须写死-->
    </ul>
    <!--2.3 v-for获取对象中value，key，index-->
    <ul>
        <li v-for="(value,key,index) in info">{{index}}.{{key}}:{{value}}</li><!--value,key,indx必须写死-->
    </ul>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    let app = new Vue({
        el:"#first",
        data:{
            names:["Lucy","Tom","Jerry"],/*数组中字符串，必须加“”*/
            info:{
                name:"Jack",
                age:19,/*数值不用加“”*/
                nation:"US"
            }
        }
    })
</script>
</body>
</html>

2. v-for 绑定key提高复用

v-for在这里插v-for入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id = "first">
    <!--v-for绑定key后保证更好的复用-->

    <!--控制台三种插入方式-->
           <!--1. 数组最后面插入： app.letters.push("F")-->
           <!--2. 从第几个开始，删除几个： app.letters.splice(2,4)-->
           <!--3. 在某两个元素中间插入一个： app.letters.splice(2,0,"F")-->
    <!--html文件先渲染成一个虚拟dom，再从虚拟dom渲染到页面上-->
    <!--采用第三种方式在两个元素中添加一个，采用下面的方式效率较低-->
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>

    <!--采用在v-for中加key的方式，达到高效率的插入-->
    <ul>
        <!--为什么要在key前加”：“：？？？-->
        <li v-for="item in letters" :key="item">{{item}}</li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el:"#first",
        data:{
            letters:["A","B","C","D","E"]
        }
    })
</script>
</body>
</html>