Vue-15、Vue条件渲染

1、v-show

在Vue中,v-show是一个指令,用于根据表达式的值来控制元素的显示与隐藏。当指令的值为true时,元素显示;当指令的值为false时,元素隐藏。

v-show的用法如下:

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <h1 v-show="isshow">欢迎来到{{name}}</h1>
    <button @click="changeshow">电子显示隐藏/显示</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
        el:"#root",
        data:{
            name:'零壹',
            isshow:true
        },
        methods:{
            changeshow(){
                this.isshow=!this.isshow;
            }
        }
    })
</script>
</body>
</html>

其中,表达式可以是一个计算属性、一个data的属性或者一个方法的返回值。

v-show的特点是,元素仍然存在于DOM中,只是通过修改元素的display属性来控制显示与隐藏。因此,使用v-show隐藏的元素会被渲染到DOM中,只是不可见而已。

与v-show相对的指令是v-if。v-if也用于控制元素的显示与隐藏,但是不同的是,v-if在元素需要隐藏时会将元素从DOM中移除,而不仅仅是隐藏。因此,当元素需要频繁的显示与隐藏时,推荐使用v-show,以提高性能。

2、v-if

总结:

相关推荐
CF14年老兵9 分钟前
当 JavaScript 遇上 Rust/Go:一场 “速度诱惑” 下的生态保卫战
前端·javascript·rust
David凉宸9 分钟前
vue手写日历
前端·javascript
itsOli14 分钟前
(25)性能优化和项目上线 | Vue.js 项目实战: 移动端“旅游网站”开发
前端·javascript·vue.js
华洛28 分钟前
从0到1打造企业级AI售前机器人——实战指南二:RAG工程落地之数据处理篇🧐
前端·javascript·vue.js
啊波次得饿佛哥1 小时前
在winform中使用chromiumWebBrowser显示Echarts图表
前端·javascript·echarts·winform·cefsharp
秋天的一阵风1 小时前
🌈尘埃落定!ECMASCRIPT 2025 标准来袭,开发者的新福音🎁
前端·javascript·ecmascript 8
xx24062 小时前
date-picker组件的shortcuts为什么不能配置在vue的data的return中
前端·javascript·vue.js
树深遇鹿2 小时前
SSE(Server-Sent Events)的使用
前端·javascript·面试
晴殇i2 小时前
抛弃 try-catch,错误处理的新方案
前端·javascript·面试
阿白的白日梦3 小时前
package.json的workspaces配置
前端·javascript