vue自学笔记-v-for指令学习（五）

最新推荐文章于 2024-05-20 13:58:24 发布

hush_Pc

最新推荐文章于 2024-05-20 13:58:24 发布

阅读量254

点赞数

本文链接：https://blog.csdn.net/weixin_42715209/article/details/102805575

版权

v-for循环普通数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
    </head>
    <body>
        <div id="app">
            <p v-for="user in users">{{ user }}</p>
            <p v-for="(user, index) in users">value：{{ user }} -----  key：{{ index }}</p>
        </div>
        
        <script type="text/javascript" src="./lib/vue-2.6.10.js"></script>
        <script>
            var vm = new Vue({
                el: '#app',
                data:{
                    users: [0, 1, 2, 3, 4]
                }
            })
        </script>
    </body>
</html>

v-for循环对象数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
    </head>
    <body>
        <div id="app">
            <p v-for="user in users">{{ user }}</p>
            <p v-for="(user, index) in users">value：{{ user }} -----  key：{{ index }}</p>
            
            <p v-for="(user, index) in users1">对象name：{{ user.name}} ----- 对象age：{{ user.age}} ---- 索引：{{ index }}</p>
        </div>
        
        <script type="text/javascript" src="./lib/vue-2.6.10.js"></script>
        <script>
            var vm = new Vue({
                el: '#app',
                data:{
                    users: [0, 1, 2, 3, 4],
                    users1: [
                        {name:'小王', age: '20'},
                        {name:'小张', age: '21'},
                        {name:'小李', age: '22'}
                    ]
                }
            })
        </script>
    </body>
</html>

v-for循环对象属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
    </head>
    <body>
        <div id="app">
            <p v-for="user in users">{{ user }}</p>
            <p v-for="(user, index) in users">value：{{ user }} -----  key：{{ index }}</p>
            
            <p v-for="(user, index) in users1">对象name：{{ user.name}} ----- 对象age：{{ user.age}} ---- 索引：{{ index }}</p>
        
            <p v-for="(value, key, index) in users2">属性值：{{ value }} , 属性key：{{ key }} , 索引：{{ index }}</p>
        </div>
        
        <script type="text/javascript" src="./lib/vue-2.6.10.js"></script>
        <script>
            var vm = new Vue({
                el: '#app',
                data:{
                    users: [0, 1, 2, 3, 4],
                    users1: [
                        {name:'小王', age: '20'},
                        {name:'小张', age: '21'},
                        {name:'小李', age: '22'}
                    ],
                    users2:{ name:'小王', age: '20', sex: '男' }
                }
            })
        </script>
    </body>
</html>

v-for迭代数字

<p v-for="count in 10">{{ count }}</p>

注意点：2.2.0+后，v-for循环中必须指定唯一的数字类型/字符串类型的key值。（尽量都写）

<p v-for="(value, key, index) in users" :key="users.age"></p>

hush_Pc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue自学笔记-v-for指令学习（五）

v-for循环普通数组<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> &...
复制链接

扫一扫