016列表渲染

最新推荐文章于 2024-07-20 16:46:53 发布

Deaoyi

最新推荐文章于 2024-07-20 16:46:53 发布

阅读量353

点赞数

分类专栏： Vue 文章标签： vue vue.js javascript

本文链接：https://blog.csdn.net/weixin_44592380/article/details/121498704

版权

Vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
    <div id="root">
        <!--遍历数组-->
        <h2>人员列表</h2>
        <ul>
            <!-- v-for里可用in也可of -->
            <li v-for="person in persons" :key="person.id">{{person.name}}-{{person.age}}</li>
        </ul>
        <ul>
            <li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}</li>
        </ul>
        <!-- 遍历对象 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value,k) of car" :key="k">
                {{k}}--{{value}}
            </li>
        </ul>
        <!-- 遍历字符串 -->
        <h2>遍历字符串</h2>
        <ul>
            <li v-for="(char,index) of str" :key="index">
                {{char}}--{{index}}
            </li>
        </ul>
        <!-- 遍历指定次数 -->
        <h2>遍历指定次数</h2>
        <ul>
            <li v-for="(num,index) of 5" :key="index">
                {{num}}--{{index}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">

        new Vue({
            el:"#root",
            data:{
                persons:[
                    {id:'001',name:'zhangsan',age:'18'},
                    {id:'002',name:'lisi',age:'24'},
                    {id:'003',name:'wangwu',age:'30'},
                ],
                car:{
                    name:'奥迪',
                    price:'78w',
                    color:'black'
                },
                str: 'hello'
            }
        })
    </script>
</body>
</html>

Deaoyi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
016列表渲染

列表渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表渲染</title> <script type="text/javascript" src="js/vue.min.js"></script></head><body> <div id="root
复制链接

扫一扫