首頁 >web前端 >js教程 >Vue中條件渲染的分析(附程式碼)

Vue中條件渲染的分析(附程式碼)

不言
不言原創
2018-07-27 13:15:061379瀏覽

這篇文章要跟大家介紹的文章內容是關於Vue中條件渲染的分析(附程式碼),有很好的參考價值,希望可以幫助到有需要的朋友。

條件指令

所謂條件指令是指滿足某個條件時執行哪一部分程式碼,不滿足條件時執行哪一部分條件程式碼。 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>
</template>

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

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

v-else- if<br>

使用條件: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===&#39;1&#39;">ishow为字符串类型1我将首次展现</span>
      <span v-else-if="isshow===&#39;2&#39;">(elseif)否则ishow为字符串类型2我将首次展现</span>
      <span v-else-if="isshow===&#39;3&#39;">(elseif)否则ishow为字符串类型3我将首次展现</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: &#39;v-if&#39;,
    data () {
      return {
        title: &#39;条件渲染&#39;,
        isshow: &#39;2&#39;
      }
    }
  }
</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: &#39;v-if&#39;,
    data () {
      return {
        title: &#39;条件渲染&#39;,
        isshow: 3
      }
    }
  }
</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: &#39;v-if&#39;,
      data () {
          return {
            title: &#39;条件渲染&#39;,
            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===&#39;1&#39;">ishow为字符串1我将首次展现</span>
      <span v-else>ishow不为字符串1我将首次展现</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: &#39;v-if&#39;,
    data () {
      return {
        title: &#39;条件渲染&#39;,
        isshow: &#39;1&#39;
      }
    }
  }
</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: &#39;v-if&#39;,
    data () {
      return {
        title: &#39;条件渲染&#39;,
        isshow: &#39;1&#39;
      }
    }
  }
</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: &#39;v-if&#39;,
    data () {
      return {
        title: &#39;条件渲染&#39;,
        isshow: 3
      }
    }
  }
</script>

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

 總結:複雜的程式都是由簡單的判斷條件組合變化而成,在程式中靈活使用判斷條件才是最重要的。

相關推薦:
Vue中v-model指令的分析(附程式碼)

以上是Vue中條件渲染的分析(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn