Vue学习笔记(十二、v-if 和 v-show)

        先看代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>VueBaseCode</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="toggle" @click="toggle">
        <p v-if="flag">使用v-if控制的段落</p>
        <p v-show="flag">使用v-show控制的段落</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag:"true"
            },
            methods: {
                toggle() {
                    this.flag = !this.flag
                }
            }
        });
    </script>
</body>

</html>

        效果如下:

        当按下toggle按钮的时候,能够控制两个段落的显示和隐藏。

        同样是控制显示和隐藏,v-if 和 v-show 有什么区别呢?

        这里 v-if 为 false 时,实际上是删除了该段落对象,当v-if 为true 时,实际上是重新生成了p段落对象。但是v-show仅仅是通过将p段落的style中的display设置实现段落的显示和隐藏,当把v-show设置为false时,其display为none,当v-show设置为true时,移除style风格中的display内容。

猜你喜欢

转载自blog.csdn.net/ttod/article/details/143189961