02.条件与循环

条件渲染指令： v-if、v-else-if、v-else：可以根据表达式的值在DOM中渲染或销毁元素/组件,与v-show不同的是，v-if是真正的条件渲染，适合条件不经常变更的场景；而v-show只是简单的CSS属性切换，使用于频繁切换条件。（摘抄老师的）

v-if的例子

<div id = "app">
    <p v-if="status === 1">当status为1时显示该行</p>
    <p v-else-if="status === 2">当status为2时显示该行</p>
    <p v-else>否则显示该行</p>
</div>
<script>
 var app = new Vue({
     el : '#app',
     data:{
       status:1
    }
})
</script>

注意当status为1 时 <p v-else-if="status === 2">当status为2时显示该行</p>不存在

v-show举例：

<div id = "app">
    <p v-show="status === 1">当status为1时显示该行</p>
</div>
<script>
 var app = new Vue({
     el : '#app',
     data:{
       status:2
    }
})
</script>

当status为2时，当status为1时显示该行 这个是存在的只是显示

列表渲染指令：v-for：当需要将一个数组遍历或枚举一个对象循环显示时，会用到列表渲染指令v-for，结合in来使用 举个具体例子

for.jpg

从这个例子中可以看出for遍历了数组