6.v-for 列表渲染

最新推荐文章于 2024-07-28 18:19:21 发布

iqzn.

最新推荐文章于 2024-07-28 18:19:21 发布

阅读量150

点赞数

分类专栏： Vue 学习笔记文章标签：前端 vue.js 前端框架 html

本文链接：https://blog.csdn.net/weixin_49398894/article/details/123592259

版权

学习笔记同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

Vue

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
    <div id="root">
      <!--遍历数组-->
      <h2>人员列表</h2>
      <ul>
          <li v-for="(p,index) in persons" :key="index">
            {{p.name}}-{{p.age}}
          </li>
      </ul>
      <!--遍历对象-->
      <h2>汽车信息</h2>
      <ul>
          <li v-for="(val,k) in car" :key="k">
            {{k}}-{{val}}
          </li>
      </ul>
      <!--遍历字符串-->
      <h2>测试遍历字符串</h2>
      <ul>
          <li v-for="(a,b) in str" :key="b">
            {{a}}-{{b}}
          </li>
      </ul>
    </div> 

    <script type="text/javascript">
        Vue.config.productionTip=false//阻止vue在启动时生成生产提示
        //创建vue实例
        new Vue({
            el:'#root',
            data:{
                persons:[
                    {id:'001',name:'张三',age:'18'},
                    {id:'002',name:'李四',age:'19'},
                    {id:'003',name:'王五',age:'20'}
                ],
                car:{
                    name:'奔驰',
                    price:'50万',
                    color:'黑色'
                },
                str:'hello'
            }
        })
    </script>  
</body>
</html>

在这里插入图片描述

iqzn.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.v-for 列表渲染

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

扫一扫

专栏目录