v-if
说明:这个指令如果写在组件上的话,只有在其值为真的时候才会渲染
基本的使用方法:
<template>
<view v-if="flag">box1</view>
</template>
<script setup>
import {ref} from "vue";
const flag=ref(true) //定义一个响应式布尔值,根据其值的真/假来控制是否显示组件
</script>
<style lang="scss" scoped>
</style>
v-else
说明:一般是会跟v-if一起连用,如果v-if的值为false的话就会渲染,定义的v-else的组件
基本的使用方法:
<template>
<view v-if="flag">box1</view>
<view v-else>box2</view>
</template>
<script setup>
import {ref} from "vue";
const flag=ref(false) //值为flase不会渲染box1,会渲染box2
</script>
<style lang="scss" scoped>
</style>
注意:v-if和v-else连用的使用中间不能有任何的组件以及字符,要不然就会报语法错误,且v-else不能单独使用
v-else-if
说明:跟v-if连用,可以用多个v-else-if,并且可以在最后加上v-else
基本的使用方法:
<template>
<view style="margin-top: 20px;">
请输入今天星期几(阿拉伯数字1-7):<input type="text" @input="onChangeInputValue" :class="'inputStyle'">
<!-- @input文本框输入的时候触发的事件 -->
</view>
<view v-if="num===1">星期一</view>
<view v-else-if="num===2">星期二</view>
<view v-else-if="num===3">星期三</view>
<view v-else-if="num===4">星期四</view>
<view v-else-if="num===5">星期五</view>
<view v-else-if="num===6">星期六</view>
<view v-else-if="num===7">星期天</view>
<view v-else>格式错误</view>
</template>
<script setup>
import {ref} from "vue";
const num = ref();
function onChangeInputValue(e) {
//为num赋文本框的值,以用于组件的判断
num.value = parseInt(e.detail.value);
}
</script>
<style lang="scss" scoped>
.inputStyle {
display: inline-block;
vertical-align: middle;
margin-left: 5px;
border: 1px solid black;
width: 70px;
}
</style>
注意:在使用v-else-if的时候前面必须跟有一个v-if或者是前面已经跟有一个v-if的v-else-if的后面,v-else-if不能单独使用!
如果我们不想在不想再一些组件的外面套一个view容器来做v-if判断的话可以使用<template>,如:
<template>
<view>1111</view>
<template v-if="flag">
<h1>2222</h1>
<text>3333</text>
</template>
</template>
<script setup>
import {ref} from "vue";
const flag=ref(true);
</script>
<style lang="scss" scoped>
</style>
可以看到h1、text和view组件是同一级别,并且template没有显示处理
v-show
说明:v-show和我们的v-if是一样的用法
基本的使用方法:
<template>
<view v-show="flag">box1</view>
</template>
<script setup>
import {ref} from "vue";
const flag=ref(true) //定义一个响应式布尔值,根据其值的真/假来控制是否显示组件
</script>
<style lang="scss" scoped>
</style>
那为什么vue3还要设计这么一个v-show指令呢?
那么接下来就说说v-if和v-show的区别.
v-if和v-show的区别
<template>
<view v-if="flag">box</view>
<view v-show="flag">box2</view>
</template>
<script setup>
import {ref} from "vue";
const flag=ref(false);
</script>
<style lang="scss" scoped>
</style>
我们可以看到在页面上的显示是没有区别的,但是在我们浏览器的Elements的DOM树上v-if是显示一个带有"v-if"字样的注释,v-show而是通过style属性的display:node来隐藏元素。
更加直观的区别:
<template>
<view v-if="flag">
<image src="../../static/test.jpg" mode=""></image>
</view>
<view v-show="flag">
<image src="../../static/test.jpg" mode=""></image>
</view>
</template>
<script setup>
import {ref} from "vue";
const flag=ref(false);
</script>
<style lang="scss" scoped>
</style>
总结:
用了v-if的组件,如果包含了图片等一些需要加载的资源的话,v-if其值为false时不会加载,但是,用了v-show的组件,即使其值为false时也会加载图片等资源,所以说如果加载的资源多了的话,从速度上可以理解用了v-if的组件加载更快节省加载时间,用了v-show的组件加载更加的慢,所以可以根据实际情况自行选择在开发过程中用哪一种。