vue.js的条件语句和循环语句

1.vue.js条件语句
v-if与v-else以及v-else-if跟在c语言的if ，else， 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>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

还有一个show指令跟if指令差不多，都是根据条件来展示元素
举例代码如下：

<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>

代码结果为：Hello！

2.vue.js循环语句
vue.js循环指令为v-for
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名,这种用法跟python的for循环差不多。
迭代列表

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

迭代对象

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

value为键值， key为键名，index为索引值，value不能省略

迭代整数

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

迭代数组

<div id="app">
  <ul>
    <li v-for="n in [1,3,5]">
      {{ n }}
    </li>
  </ul>
</div>

具体可参考：菜鸟教程https://www.runoob.com/vue2/vue-if.html
官网教程https://cn.vuejs.org/v2/guide/conditional.html