這篇文章要跟大家介紹的文章內容是關於Vue中條件渲染的分析(附程式碼),有很好的參考價值,希望可以幫助到有需要的朋友。
所謂條件指令是指滿足某個條件時執行哪一部分程式碼,不滿足條件時執行哪一部分條件程式碼。 vue條件指令有v-if,v-else-if,v-else三個,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: 'v-if', data () { return { title: '条件渲染', 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==='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: '2' } } } </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: 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: '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: '1' } } } </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: '1' } } } </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: 3 } } } </script> <style scoped> .title1 { text-align: left; } .div1{ float: left; } </style>
總結:複雜的程式都是由簡單的判斷條件組合變化而成,在程式中靈活使用判斷條件才是最重要的。
以上是Vue中條件渲染的分析(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!