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

总结:

相关推荐
sunn。26 分钟前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui
烛阴1 小时前
Express入门必学三件套:路由、中间件、模板引擎全解析
javascript·后端·express
哟哟耶耶1 小时前
React-01React创建第一个项目(npm install -g create-react-app)
前端·javascript·react.js
Heidi__3 小时前
Vue 3 的响应式原理
前端·javascript·vue.js
夏之小星星3 小时前
element-ui自制树形穿梭框
前端·javascript·ui·elementui·vue
Monly215 小时前
Vue:Table在点击删除的时候阻止行点击事件
前端·javascript·vue.js
我自纵横20236 小时前
使用 JavaScript 动态设置 CSS 样式
开发语言·前端·javascript·css·html·json·html5
leluckys6 小时前
flutter 专题 六十八 Flutter 多图片上传
前端·javascript·flutter
Enti7c6 小时前
数据一键导出为 Excel 文件
前端·javascript·excel·jquery
microhex7 小时前
Javascript代码压缩混淆工具terser详解
开发语言·javascript·ecmascript