這篇文章要跟大家介紹的文章內容是關於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: '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中v-model指令的分析（附程式碼）
以上是Vue中條件渲染的分析（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
