master

分支 (1)

管理

管理

master

vue_stu
/
07-if-show.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
    <!--点击的时候-->
    <button @click="show = !show">点击</button>
    <h2 v-show="!show" style="color: blue">
        hello
    </h2>

    <button @click="show = !show">点击</button>
    <h2 v-if="show">
        hello
    </h2>
</div>

<script>
    /**
     * v-if：是否添加相应的html结构
     * v-show：假如是false的话只是在样式上修改了显示方式为不显示
     * @click后面可以接简单表达式的
     * @type {Vue}
     */
    var vue = new Vue({
        el: "#box",
        data: {
            show: true
        }

    })
</script>
</body>
</html>