Vue : v-if, v-show

niceffking

于 2023-12-29 13:45:57 发布

阅读量542

点赞数 10

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/niceffking/article/details/135288859

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

v-show

v-if

v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-show="isShow">hello world</p>
    </div>
</body>
<script>
    const vm = new Vue({
        el : '#app',
        data : {
            isShow : true
        }
    })
</script>
</html>

如果isShow为false, 那么v-show = false相当于将其隐藏了, 当然, 里面不一定需要data里面的属性, 里面也可以是一个表达式, 例如

        <p v-show="1==3">hello world</p>

那么就给他隐藏掉了, 查看控制台元素:

得知, 他并没有被删除到, 而是设置了style属性将其隐藏了/

v-if

同v-show一样, 也是条件渲染, 但是v-if里面的值如果为false ,那么就会直接将其彻底从html中删除, 而不是隐藏

v-if通常配合v-else-if来使用, 这个可以和java的流程语句来对比, 他们之间的用法是类似的. 多个判断if 和if else判断, 然后使用v-else来结尾. 但是需要注意的是, v-else是不需要值的:

        <p v-show="isShow">hello world</p>
        <p v-if="true">1</p>
        <p v-else-if="true">1</p>
        <p v-else-if="true">1</p>
        <p v-else>1</p>

但是需要记住的是, 多个v-if v-else的html标签必须连写在一起, 他们中间不允许有其他的标签:

下面是一种错误的写法:

        <p v-show="isShow">hello world</p>
        <p v-if="true">1</p>
        <div>你好呀</div>
        <p v-else-if="true">1</p>
        <p v-else-if="true">1</p>
        <p v-else>1</p>

那么这个div里面就是打断整个流程的点, 在这个点前面的内容是正常生效的, 但是后面的v-else-if是不会生效的

v-if和template的使用:

                <template id="tem2" v-if="1===2">
                    <p>1</p>
                    <p>2</p>
                    <p>3</p>
                </template>

template不能和v-show一起使用