程式碼：

<template>
  <div id="app">

    <!-- 千米和米換算 -->
    <div id = "computed_props">
         <input type = "text" v-model = "kilometers"> 千米=
         <input type = "text" v-model = "meters">米
      </div>
	   <p id="info"></p>
     <br/>

    <!-- 數值計算 -->
    <p>計數器: {{ counter }}</p>
    <button @click = "counter +=2">點一下就自增2</button>
    <br/> <br/>  <br/> 

    <!-- 九九乘法表 -->
    <div v-for="n in 9" :key="n" style = "font-size:25px; color:green">
        <b v-for="m in n" :key="m">
            {{m}}*{{n}}={{m*n}}
        </b>
    </div>
    <br/> <br/>  

    <!-- 整數範圍內迭代 -->
    <!-- <li v-for="n in 10" :key="n"> -->
    <!-- 陣列迭代 -->
    <li v-for="n in [1,3,5]" :key="n">
      {{ n }}
    </li>

   <br/> <br/>  
    <!-- 迭代物件屬性 鍵值對 -->
    <ul>
      <li v-for="(value, key) in 小熊" :key="value">
      {{ key }} : {{ value }}
      </li>
    </ul>

    <br/> <br/>  
    <!-- 迭代物件屬性 -->
    <ul>
      <li v-for="value in 小熊" :key="value">
      {{ value }}
      </li>
    </ul> 

    <br/> <br/>  
    <!-- 第三個引數為索引 -->
    <ul>
      <li v-for="(value, key, index) in 小熊"  :key="value">
      {{ index }}. {{ key }} : {{ value }}
      </li>
    </ul>

    <br/> <br/>  
    <!-- 帶模板的迴圈 -->
    <ul  v-for="site in sites" :key="site">
      <li>{{ site.name }}</li>
      <li>--------------</li>
    </ul>

    <br/> <br/>  
    <!-- 簡單迴圈 -->
    <ol>
      <li v-for="site in sites" :key="site">
        {{ site.name }}
      </li>
    </ol>

    <!-- 根據ok的值確定是否顯示資料 -->
    <div v-show="ok">為true就顯示</div>

    <br/> 
    <!-- 多條件判斷 -->
    <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>
</template>


<script>

export default {
  name: 'app',
  data () {
    return {
      kilometers : 0,
      meters:0,
      counter: 1,
      type: 'A',
      ok:false,
      sites: [
        { name: '文文樂園' },
        { name: '怕血的小蚊子' },
        { name: '火魔滅世' }
      ],
      小熊: {
        暱稱: '微風輕許',
        網址: 'https://blog.csdn.net/jiangyu1013',
        描述: '我的日常筆記'
      }
    }
  },
   watch : {
    kilometers:function(val) {
      this.kilometers = val;
      this.meters = val * 1000;
    },
    meters : function (val) {
      this.kilometers = val/ 1000;
      this.meters = val;
    }
  }
}


</script>
 

執行效果：