VUE--v-for的使用

最新推荐文章于 2023-07-27 11:30:18 发布

雍正写BUG

最新推荐文章于 2023-07-27 11:30:18 发布

阅读量85

点赞数

分类专栏： html VUE 文章标签： html5 javascript 前端

CSDN@雍正写BUG

本文链接：https://blog.csdn.net/laizhuo4868/article/details/113843963

版权

html 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

VUE

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
</head>

<body>
<div id="app">
    <span>{{user.name}} {{user.age}}</span>
    <br>
    <!--通过key遍历对象-->
    <span v-for="(index,value,key) in user">
         - {{key}}  - {{value}}- {{index}}
    </span>
    <br>
    <!--通过v-for遍历数组-->
    <span v-for="a,index in arr">
        {{a}} - {{index}}
    </span>
    <!--通过v-for遍历数组中的对象-->
    <!--:key 便于vue内部做重用和排序-->
    <ul>
        <li v-for="user,index in users":key="user.id">
            {{index + 1 }} - {{user.name}} - {{user.age}} - {{user.content}}
        </li>
    </ul>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user:{name:"小陈",age:23},
            arr:["北京", "天津", "河南"],
            users:[
                {id:"1",name:"xiaochen",age:23,content:"我曾经也是一个单纯的少年!"},
                {id:"2",name:"小白",age:23,content:"我曾经是一个邪恶的少年!"},
            ]
        },
        methods: {}
    })
</script>
</body>
</html>

雍正写BUG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE--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</title></head><body><div id="app"&gt
复制链接

扫一扫