Vue.js 模板语法 和 v-for 循环遍历数组

<template>
  <div class="test">
  1.模板获取数据的3种形式
    <h1>{{title}}</h1>
    <p>{{user.name}}</p>
    <p v-text="user.age"></p>
    <p v-html="user.age"></p>

  2.v-if的使用：v-else就是给v-if添加一个 'else' 块
    <p v-if="showName">{{user.name}}</p>
    <!-- v-else-if的使用 -->
    <div id="app">
      <div v-if="type === 'A'">
        A
      </div>
      <div v-else-if="type === 'B'">
        B
      </div>
      <div v-else-if="type === 'C'">
        C
      </div>
      <div v-else>
        Not A/B/C
      </div>
    </div>

  3.v-show的使用：当 showName 的值为true时显示，为false时不显示，和v-if有点类似
    <p v-show="showName">{{user.name}}</p>

  4.v-for循环遍历数组
    <div>
    <table border="1px">
        <tr>
          <td>姓名</td>
        </tr>
        <tr v-for="i in student" >
          <td>
            {{ i.name }}
          </td>
        </tr>
    </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      title: '我擦嘞！！！',
      type: 'A',
      user: {
        name: '小甲',
        age: '19',
        sex: '男'
      },
      showName: true,
      student: [
        { name: '小甲' },
        { name: '小乙' },
        { name: '小丙' },
        { name: '小丁' }
      ]
    }
  }
}
</script>

<style scoped>

</style>