2. vue2 绑定数据 绑定对象 循环数组渲染数据

一、 插值表达式 - 绑定数据

插值表达式，专业术语称为mastach语法，就是通过两对花括号包含的一个表达式，可以直接执行js表达式语句，很方便的完成数据和页面的连接

<template>
  <div>
    <h2>{{ name }}</h2>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      name: "test",
    };
  },
};
</script>

二、 绑定对象

<template>
  <div>
    <h2>{{ name }}</h2>
    <h3>{{ info.age }} | {{ info.tel }}</h3>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      name: "test",
      info: {
        age: 18,
        tel: 18887878870,
      },
    };
  },
};
</script>

三、 循环数组渲染数据

<template>
  <div>
    <h2>{{ name }}</h2>
    <h3>{{ info.age }} | {{ info.tel }}</h3>
    <br />
    <ul>
      <li v-for="(item, index) in list">{{ index }} - {{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      name: "test",
      info: {
        age: 18,
        tel: 18887878870,
      },
      list: ["a", "c", "d"],
    };
  },
};
</script>