v-if
指令用于条件性地渲染一块内容
这块内容只会在指令的表达式返回 truthy
值的时候被渲染
使用 v-else
指令来表示 v-if 的“else 块”
在 JavaScript 中,truthy(真值)指的是在布尔值上下文中,转换后的值为真的值 所有值都是真值,除非它们被定义为 假值(即除 false、0、””、null、undefined 和 NaN 以外皆为真值)
<template>
<view>
<view v-if="seen">现在你看到我了</view> ***********v-if***************
<view v-else>你看不到我了</view> ***********v-else***************
</view>
</template>
<script>
export default {
data() {
return {
seen: true
}
}
}
</script>
v-else-if
,顾名思义,充当 v-if 的“else-if 块”,可以连续使用:
<template>
<view>
<view v-if="type === 'A'">
A
</view>
<view v-else-if="type === 'B'">
B
</view>
<view v-else-if="type === 'C'">
C
</view>
<view v-else>
Not A/B/C
</view>
</view>
</template>
<script>
export default {
data() {
return {
type:'B'
}
}
}
</script>
类似于 v-else
,v-else-if
也必须紧跟在带 v-if
或者 v-else-if
的元素之后。
例子:
既然是做判断,首先要有一个条件
<template>
<!-- v-if v-show的区别,前者是否会在dom中被移除,后者display:none -->
<view v-if="isShow">
now you see me
</view>
<view v-else>
now you can't see me
</view>
<view v-show="isShow">
now you see me
</view>
</template>
<script>
export default {
data() {
return {
isShow:true
}
},
methods: {
}
}
</script>
<style>
</style>