Vue学习之路6-条件渲染

条件指令

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

v-if示例

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

 <template>
   <div>
     <p class="title1">{{title}}</p>
     <div class="div1">
       <span v-if="isshow">ishow为true我将首次展现</span>
       <span v-if="!isshow">ishow为false我将首次展现</span>
     </div>
   </div>
 </template>

 <script>
   export default {
         name: 'v-if',
       data () {
           return {
             title: '条件渲染',
             isshow: true
           }
       }
     }
 </script>

 <style scoped>
   .title1 {
     text-align: left;
   }
   .div1{
     float: left;
   }
 </style>

v-else-if


使用条件：v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后，当项目中有多个判断条件时使用。

使用方式一：使用字符串显示标签，当判断条件初始化值为字符串1时，则显示if标签，当判断条件初始化值不为字符串1时，则根据判断条件显示v-else-if条件标签，示例如下：

 <template>
   <div>
     <p class="title1">{{title}}</p>
     <div class="div1">
       <span v-if="isshow==='1'">ishow为字符串类型1我将首次展现</span>
       <span v-else-if="isshow==='2'">(elseif)否则ishow为字符串类型2我将首次展现</span>
       <span v-else-if="isshow==='3'">(elseif)否则ishow为字符串类型3我将首次展现</span>
     </div>
   </div>
 </template>

 <script>
   export default {
     name: 'v-if',
     data () {
       return {
         title: '条件渲染',
         isshow: ''
       }
     }
   }
 </script>

 <style scoped>
   .title1 {
     text-align: left;
   }
   .div1{
     float: left;
   }
 </style>

使用方式二：使用数字类型显示标签，当判断条件初始化值为数字类型1时，则显示if标签，当判断条件初始化值不为数字类型1时，则根据判断条件显示v-else-if条件标签，示例如下：

 <template>
   <div>
     <p class="title1">{{title}}</p>
     <div class="div1">
       <span v-if="isshow===1">ishow为数字类型1我将首次展现</span>
       <span v-else-if="isshow===2">(elseif)否则ishow为数字类型2我将首次展现</span>
       <span v-else-if="isshow===3">(elseif)否则ishow为数字类型3我将首次展现</span>
     </div>
   </div>
 </template>

 <script>
   export default {
     name: 'v-if',
     data () {
       return {
         title: '条件渲染',
         isshow:
       }
     }
   }
 </script>

 <style scoped>
   .title1 {
     text-align: left;
   }
   .div1{
     float: left;
   }
 </style>

v-else示例

使用条件：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

使用方式一：if-else类型，使用初始化bool值显示标签：

 <template>
   <div>
     <p class="title1">{{title}}</p>
     <div class="div1">
       <span v-if="isshow">ishow为true我将首次展现</span>
       <span v-if="!isshow">ishow为false我将首次展现</span>
     </div>
   </div>
 </template>

 <script>
   export default {
         name: 'v-if',
       data () {
           return {
             title: '条件渲染',
             isshow: false
           }
       }
     }
 </script>

 <style scoped>
   .title1 {
     text-align: left;
   }
   .div1{
     float: left;
   }
 </style>

使用方式二：if-else类型，用字符串显示标签，当初始化值为字符串1时，显示if标签，当初始化值不为字符串1的时候，显示else标签，示例如下：

 <template>
   <div>
     <p class="title1">{{title}}</p>
     <div class="div1">
       <span v-if="isshow==='1'">ishow为字符串1我将首次展现</span>
       <span v-else>ishow不为字符串1我将首次展现</span>
     </div>
   </div>
 </template>

 <script>
   export default {
     name: 'v-if',
     data () {
       return {
         title: '条件渲染',
         isshow: ''
       }
     }
   }
 </script>

 <style scoped>
   .title1 {
     text-align: left;
   }
   .div1{
     float: left;
   }
 </style>

使用方式三：if-else类型，用数字类型显示标签，当初始化值为数字类型1时，显示if标签，当初始化值不为数字类型1的时候，显示else标签，示例如下：

 <template>
   <div>
     <p class="title1">{{title}}</p>
     <div class="div1">
       <span v-if="isshow===1">ishow为数字类型1我将首次展现</span>
       <span v-else>ishow不为数字类型1我将首次展现</span>
     </div>
   </div>
 </template>

 <script>
   export default {
     name: 'v-if',
     data () {
       return {
         title: '条件渲染',
         isshow: ''
       }
     }
   }
 </script>

 <style scoped>
   .title1 {
     text-align: left;
   }
   .div1{
     float: left;
   }
 </style>

使用方式四：if-elseif-else类型，当if和elseif条件都不满足时，显示else标签，示例如下：

 <template>
   <div>
     <p class="title1">{{title}}</p>
     <div class="div1">
       <span v-if="isshow===1">ishow为数字类型1我将首次展现</span>
       <span v-else-if="isshow===2">(elseif)否则ishow为数字类型2我将首次展现</span>
       <span v-else>if-elseif条件都不满足，我将首次展现</span>
     </div>
   </div>
 </template>

 <script>
   export default {
     name: 'v-if',
     data () {
       return {
         title: '条件渲染',
         isshow:
       }
     }
   }
 </script>

 <style scoped>
   .title1 {
     text-align: left;
   }
   .div1{
     float: left;
   }
 </style>

总结：复杂的程序都是由简单的判断条件组合变化而成，在程序中灵活使用判断条件才是最重要的。