Vue学习之路6-条件渲染

所谓条件指令是指满足某个条件时执行哪部分代码，不满足条件时执行哪部分条件代码。vue条件指令有v-if，v-else-if，v-else三个，v-if条件渲染用来指示元素是否移除或者插入，根据表达式的值的真假条件渲染元素。

v-if示例

方式一使用v-if显示标签，当初始化值为true时，则显示第一个标签，当初始化值为false时，则显示第二个标签：

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1">
 5       <span v-if="isshow">ishow为true我将首次展现</span>
 6       <span v-if="!isshow">ishow为false我将首次展现</span>
 7     </div>
 8   </div>
 9 </template>
10 
11 <script>
12   export default {
13         name: 'v-if',
14       data () {
15           return {
16             title: '条件渲染',
17             isshow: true
18           }
19       }
20     }
21 </script>
22 
23 <style scoped>
24   .title1 {
25     text-align: left;
26   }
27   .div1{
28     float: left;
29   }
30 </style>

View Code