首页 > 其他分享 >【vue3入门】-【6】条件渲染

【vue3入门】-【6】条件渲染

时间:2024-04-25 21:02:02浏览次数:18  
标签:false 入门 渲染 show vue3 else flag 条件

条件渲染

在vue中,提供了条件渲染,这类似于javascript中的条件语句

  • v-if
  • v-else
  • v-else-if
  • v-show

v-if指令用于条件性的渲染一块内容,这块内容只会在指令的表达式返回真值时才会渲染。v-else指令则在前面的if指令都不满足时则执行的指令

<template>
    <div>条件渲染</div>
    <div v-if="flag">你能看见我么</div>  # flag为true则展示
    <div v-else>还是看看其他的吧</div> # flag为false则展示
</template>
<script>
export default{
    data(){
        return {
            flag:false  // true时,if为真,则展示“你能看看我么”;false时,if为假,进入else,则展示“还是看看其他的吧”
        }
    }
}
</script>

v-else-if

顾名思义,v-else-if提供的是相当云v-if的“else if区块”。可以连续多次重复使用

<template>
    <h3>条件渲染</h3>
    <div v-if="flag">你能看见我么</div>
    <div v-else>还是看看其他的吧</div>

    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>D</div>
</template>
<script>
export default {
    data() {
        return {
            flag: false,
            type: "F"
        }
    }
}
</script>

v-show

另一个可用来按条件显示一个元素的指令,其用法基本一样

<template>
    <h3>条件渲染</h3>
    <div v-if="flag">你能看见我么</div>
    <div v-else>还是看看其他的吧</div>

    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>D</div>
    <div v-show="flag">你能看见我么</div> <!--作用和v-if类似,区别是if是删除元素,show是隐藏元素-->

</template>
<script>
export default {
    data() {
        return {
            flag: true,
            type: "F"
        }
    }
}
</script>

image

v-ifv-show的区别

v-if是“真实的”按条件渲染,因为它确保了在切换时,条件区块内的时间监听器和子组件都会被销毁和重建

v-if是惰性的如果在初次渲染师条件值为false,则不会做任何事。条件取款只有在当条件首次变为true时,才会被渲染。

相比之下,v-show简单许多,元素无论初始条件如何,始终会被渲染,只有css display属性会被切换。

总得来说,v-if有更高的切换开销,而v-show有更高的初始渲染开销。因此如果需要频繁切换,则使用v-show比较好;如果在运行时绑定条件很少改变,则v-if会更合适。

标签:false,入门,渲染,show,vue3,else,flag,条件
From: https://www.cnblogs.com/T-Ajie/p/18158567

相关文章

  • 【vue3入门】-【7】列表渲染
    列表渲染v-for列表渲染可以使用一个v-for指令基于一个数组来渲染一个列表,v-for指令的值需要使用iteminitems形式的特殊语法,其中items是源数据的数组,而item是迭代项的别名,item是可以改名的,和{{}}内的名称保持一致就行,结合div或其他标签使用,可以获取列表内的多个属性值v-fo......
  • 【vue3入门】-【8】事件处理
    事件处理我们可以使用v-on指令(简写为@)来监听DOM事件,并在事件触发时,执行对应的javascript。用法v-on:click="methodName"或者@click="handler"事件处理器的值可以是:内联事件处理器:事件被触发时执行的内联JavaScript语句(与onclick类似)方法事件处理器:一个指向组件上顶一个方法的......
  • 【Flink入门修炼】2-3 Flink Checkpoint 原理机制
    如果让你来做一个有状态流式应用的故障恢复,你会如何来做呢?单机和多机会遇到什么不同的问题?FlinkCheckpoint是做什么用的?原理是什么?一、什么是Checkpoint?Checkpoint是对当前运行状态的完整记录。程序重启后能从Checkpoint中恢复出输入数据读取到哪了,各个算子原来的状态是......
  • 【vue3入门】-【2】文本插值
    文本插值最基本的数据绑定形式是文本插值,它使用的是”Mustache“语法(即双大括号)<script>exportdefault{data(){return{msg:"神奇的语法"}}}//以上为文本插值的固定使用格式</script><template><h3>模版语法</h3><p>{{msg}}</p></templ......
  • 【vue3入门】-【3】使用javascript表达式
    使用javascript表达式每个绑定仅支持单一表达式,也就是一段能够被求值的JavaScript代码。一个简单的判断方法是是否可以合法的写在return后面。<template><h3>模版语法</h3><p>{{msg}}</p><p>{{number+1}}</p><p>{{ok?"yes":"No"}}</......
  • 【vue3入门】-【4】插入html
    原始html双大括号,将会将数据插值为纯文本,而不是html,若想要插入html,则需要使用v-html指令<template><h3>模版语法</h3><p>{{tthtml}}</p><!--会直接将html文本展示出来-->><pv-html="tthtml"></p><!--会在进行渲染后展示出来-->></templa......
  • vue中函数使用、class和style属性、条件渲染、列表渲染、数据的双向绑定、input事件、
    【事件指令中的函数使用】1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Title</title>6<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&......
  • 【vue-入门】-【1】Vue介绍与项目结构
    Vue是什么?渐进式javaScript框架,易学易用,性能出色,适用场景丰富的web框架官方文档地址:https://cn.vuejs.orgVue简介是渐进式javascript框架,易学易用,性能出色,适用场景丰富的web前端框架Vue是一款用于构建用户节点的javascript框架。它基于标准html、css、javascript构建并提......
  • 3d软件哪个适合新手学?3D动画渲染怎么好
    在不同的行业领域,3D建模和动画的需求各异,因此所需的3D软件工具也会有所不同。对于刚开始接触3D设计的新手来说,软件的易操作性、丰富的学习资源以及与自己专业领域相关的功能是选择时的重要考虑因素。以下是几款适合初学者入门的3D软件推荐。工业设计师:犀牛、Alias犀牛和Alias......
  • vue3使用echarts的tree,自己写事件进行分页
    vue3使用echarts的tree,自己写事件进行分页  先到npmjs官网查看当前使用最多的版本https://www.npmjs.com/package/echarts 看了下5.5.0用的最多[email protected] 以下的demo(“@/flare”是后面的flare.json数据)<template><divid="chart-container"></div......