Vue学习2----绑定数据，循环数组

最新推荐文章于 2023-11-06 14:53:37 发布

zhaihaohao1

最新推荐文章于 2023-11-06 14:53:37 发布

阅读量753

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/88941385

版权

Vue 专栏收录该内容

33 篇文章 3 订阅

订阅专栏

本文介绍了如何在Vue中将data中的数据绑定到HTML，并展示了如何使用Vue进行数组循环渲染。通过一个实际的App.vue文件示例，演示了代码实现过程，帮助读者掌握Vue的数据绑定和数组循环的基本用法。

摘要由CSDN通过智能技术生成

把data中的数据渲染到html标签中
例子如下（复制即可运行）：
效果图：
在这里插入图片描述
App.vue文件：

<!--03绑定数据，循环数组-->
<template>
  <!--只能有一个根节点，所有组件都卸载根节点中-->
  <div id="app">
    <!--显示 data 中定义的变量-->
    <!--字符串-->
    <p>{{name}}</p>
    <!--对象-->
    <p>{{this.obj.hobby}}</p>
    <!--循环数组-->
    <p v-for="item in list">{{ item }}</p>
    <!--循环的时候拿到索引和值-->
    <p v-for="(item,key) in list">{{key+'数据'+item }}</p>
    <!--循环装对象的数组-->
    <p v-for="obj in listObj">{{obj.message}}</p>
    <!--循环二维数组-->
    <ul>
      <!--第一次循环-->
      <li v-for="obg1 in listQ">
        {{obg1.name}}
        <!--第二次循环-->
        <ol v-for=" zi in obg1.list">
          <li>{{zi}}</li>
        </ol>
      </li>
    </ul>
  </div>
</template>

<script>
  // export default 把模块暴露出去，共外部调用
  export default {
    //数据
    data() {
      return {
        //字符串
        name: '翟浩浩的数据',
        //对象
        obj: {
          hobby: '我最喜欢的运动是跑步'
        },
        //数组
        list: ['元素1', '元素2', '元素3'],
        //数组里面放对象
        listObj: [
          {message: '刘备'},
          {message: '关羽'},
          {message: '张飞'},
          {message: '赵云'},
          {message: '马超'},
        ],
        //  数组嵌套数组
        listQ: [
          {
            name: 'zhh1',
            list: [
              'zhh1的子数组条目01',
              'zhh1的子数组条目02',
              'zhh1的子数组条目03',
            ]
          },
          {
            name: 'zhh2',
            list: [
              'zhh2的子数组条目01',
              'zhh2的子数组条目02',
              'zhh2的子数组条目03',
            ]
          },
        ]
      }
    }
  }
</script>

<style lang="scss">

</style>

源码下载：
vuedemo01
https://download.csdn.net/download/zhaihaohao1/11112017