v-show的使用

简介: v-show的使用

v-show的使用

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-if和v-show比较,当为true时两个都出现,
        当为false时两个都消失,但是v-if是真的删除了,v-show只是定义了一个display: none,隐藏了 -->
        <h1 v-if="isflag">{{message}}</h1>
        <h1 v-show="isflag">{{message}}</h1>
        <button @click="change1">按钮</button>
        <button @click="change2">按钮</button>
    </div>

    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: "sb",
                isflag: true
            },
            methods: {
                change1(){
                    this.isflag = !this.isflag;
                },
                change2(){
                    alert("hello"+this.message);
                }
            },
        })
    </script>
</body>
</html>
目录
相关文章
|
6月前
|
前端开发 JavaScript
v-if和v-show的区别
v-if和v-show的区别
39 0
|
JavaScript
v-show和v-for区别
v-show和v-for区别
v-show和v-for区别
|
JavaScript 前端开发
v-show和v-if区别
v-show和v-if区别
126 0
|
JavaScript 前端开发
v-if和v-show的区别?
v-if和v-show都是Vue.js框架中的指令,用于根据条件显示或隐藏DOM元素,但它们的实现方式不同,导致在使用时需要注意以下区别:
|
存储 SQL 关系型数据库
Show命令
Show命令
89 0
|
JavaScript 前端开发
|
JavaScript 开发者
v-if和v-show的使用和特点 | 学习笔记
快速学习v-if和v-show的使用和特点
156 0
|
JavaScript
v-if和v-show的使用和特点
一、v-if和v-show的特点 二、v-if和v-show的使用
|
JavaScript 前端开发 API