一、基础语法
v-if
v-else
v-else-if
v-show
v-if和v-show的区别
v-if可以实现更多条件判定，而v-show只能实现真假判定v-show会加载组件，只是不显示出来；v-if则不会加载组件。所以v-show有较高的初始渲染开销，v-if则会有比较高的使用加载时开销
二、v-if
使用下述代码替换 app.vue中的代码
<script setup>
const flag = 3
</script>
<template>
<p v-if="flag===1">flag=1 的时候才会打印</p>
<p v-else-if="flag===2">flag=2 的时候才会被打印</p>
<p v-else>flag不等于1和2的时候才会被打印</p>
</template>
三、v-show
使用下述代码替换 app.vue中的代码
<script setup>
const res1 = true
const res2 = false
</script>
<template>
<p v-show="res1">为真时可以看到</p>
<p v-show="res2">为假时看不到</p>
</template>
网友评论