master

分支 (1)

管理

管理

master

vue210127
/
28-v-show的使用.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- v-if：当条件为false时，包含v-if指令的元素，根本不会存在dom中-->
    <h2 v-if="isShow" id="a">{{message}}</h2>

    <!-- v-show：当条件为false，v-show只是元素添加一个行内样式display:none，仍存在dom中-->
    <h2 v-show="isShow" id="b">{{message}}</h2>

    <!-- 应用情景：-->
    <!-- 当只有一次切换时，使用v-if（实际开发使用较多）-->
    <!-- 当在显示与隐藏之间频繁切换时，使用v-show-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'simplelu',
            isShow: true
        }
    })
</script>
</body>
</html>