Vue.js 极简小例：数值计算、千米换算为米、九九乘法表、循环

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

代码：

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

 

运行效果：