vue条件语句与循环

vue条件语句与循环

    vue的条件语句与js非常类似就是多了一个"v-"而已，不过在使用时很方便。大家注意v-if和v-show的区别，以及参数迭代的使用。话不多说，看下面的实例

一、条件语句
1.条件判断,v-if,v-else if,v-else,链式多次使用。
注意：v-else 、v-else-if 必须跟在 v-if 或者 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>

<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

2.v-show，也可以使用 v-show 指令来根据条件展示元素：

   <h1 v-show="ok">SingelHero</h1>

3.v-if 与 v-show 的区别？
    在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。
v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。
因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

二、循环语句
1.循环使用 v-for 指令。
    v-for 指令需要以 item in list 形式的特殊语法， list 是源数据数组并且 item 是数组元素迭代的别名。
例如：v-for 可以绑定数据到数组来渲染一个列表：

<div id="app">
  <ol>
    <li v-for="item in list">
      {{ item.username }}
    </li>
  </ol>
</div>
 

<script>
new Vue({
  el: '#app',
  data: {
    list: [
      { username: '张三' },
      { username: '李四' },
      { username: '王五' }
    ]
  }
})
</script>

2.迭代整数
例如：v-for 也可以循环整数实现九乘九

<div id="app">
 
    <div v-for="n in 9">
      <i v-for="m in n">
       {{m}}*{{n}}={{m*n}}
      </i>
    
    <div>
  
</div>

3.迭代对象
例如: v-for 下拉框显示

<div id="app">
   <select>
    <option v-for="(value,key) in object" v-bind:value="key">{{value}}</option>
   </select>
</div>



<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '苹果',
      code: 'apple'
       } 
    }
  }
})
</script>