Vue条件与循环

一、条件判断

1、v-if

　　条件判断使用 v-if 指令：

2、v-else

　　可以用 v-else 指令给 v-if 添加一个 "else" 块：

//随机生成一个数字，判断是否大于0.5，然后输出对应信息：
<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
    
<script>
new Vue({
  el: '#app'
})
</script>

3、v-else-if

　　v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

　　v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

4、v-show

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

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

5、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 较好。

二、循环语句

　　循环使用 v-for 指令。

　　v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组，并且 site 是数组元素迭代的别名。

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

　　模板中使用 v-for：根据sites数组内容循环展示模板里的 li 标签

<ul>
  <template v-for="site in sites">
    <li>{{ site.name }}</li>
    <li>--------------</li>
  </template>
</ul>

1、v-for 迭代对象

　　v-for 可以通过一个对象的属性来迭代数据：

<li v-for="value in object">
    {{ value }}
</li>

　　也可以提供第二个的参数为键名：

<li v-for="(value, key) in object">
    {{ key }} : {{ value }}
</li>

　　第三个参数为索引：

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

　　不仅如此，在迭代属性输出的之前，v-for会对属性进行升序排序输出：

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

new Vue({
  el: '#app',
  data: {
    object: {
      2: '第三',
      0: '第一',
      1: '第二'
    }
  }
})

//输出：第一、第二、第三

2、v-for 迭代整数

　　v-for 也可以循环整数

 <li v-for="n in 10">
     {{ n }}
</li>
//从1展示到10

3、v-for 循环数组

<li v-for="n in [1,3,5]">
     {{ n }}
</li>
//展示1/3/5