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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88941385

把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>

源码下载：