v-if和v-else

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>