<div id="app">
  <p v-if="flag">这是v-if控制的元素</p>
  <p v-show="flag">这是v-show控制的元素</p>
  <!-- flag为true时元素显示，为false则隐藏 -->
</div>
<script src=""></script>

const vm = new Vue({
  el: '#app',
  data: {
    flag = true
  },
  methods: {
  }         
})

<div v-if="type === 'A'">优</div>
<div v-else-if="type === 'B'">良</div>
<div v-else-if="type === 'C'">中</div>
<div v-else>差</div>

<div id="app">
  <table class="table table-bordered table-hover table-striped">    
    <thead>
      <th>索引</th>
      <th>ID</th>
      <th>姓名</th>
    </thead>
    <tbody>
      <!-- 要循环生成什么样的DOM结构/组件，就在这个DOM结构/组件标签上添加v-for指令 -->
      <!--循环生成表格的每一行-->
      <tr v-for="(item, index) in list" :key="item.id" :title="item.name + index">     <!-- 动态绑定一个title属性，是为了证明在父元素中能使用item -->
        <td>{{ index }}</td>                <!-- 子元素能访问到父元素中的item和index -->
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
      <!-- 内容渲染时使用的数据来源：1、data 2、计算属性computed 3、当前元素及其父元素中的形参 -->
      </tr>
    </tbody>
  </table>
</div>

const vm = new Vue({
   el: '#app',
   data: {
     list: [
       {id: 1, name: '张三'},
       {id: 2, name: '李四'},
       {id: 3, name: '王五'}
     ]
   },
   methods: {
   }         
})

<template>
  <div>
    <h3>汽车信息</h3>
    <ul>
      <li v-for="(value, key) in car" :key="key">
        {{key}}---{{value}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    const vm = new Vue({
      el: '#root',
      data: {
        car: {
          name: '奥迪A8',
          price: '70万',
          color: '黑色'
        }
      }
    })
  }
</script>