Vue 条件渲染

一、v-show

　　写法：v-show="表达式"

　　适用于切换频率较高的场景

　　特点：不展示的DOM元素未被移除，仅仅是隐藏

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="container">
        <h2 v-show="isFlag">欢迎来到{{city}}</h2>
        <button @click="showMessage">点击</button>
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#container",
            data:{
                city:"徐州",
                isFlag: true
            },
            methods: {
                showMessage(){
                    this.isFlag = ! this.isFlag
                }
            },
        })
    </script>
</body>
</html>
复制代码

二、v-if

　　写法：

　　　　v-if="表达式"

　　　　v-else-if="表达式"

　　　　v-else-if="表达式"

　　　　v-else

　　适用于切换频率低的情况

　　不展示的DOM被直接删除

　　注意：v-if和v-else-if一起使用，不能被打断

　　template和v-if配合使用,且不影响代码块　

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染v-if</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="container">
        <h2 v-show="isFlag">显示n的值为{{num}}</h2>
        <button @click="showMessage">点击</button>
        <div v-if="num===1">北京</div>
        <div v-else-if="num===2">上海</div>
        <div v-else-if="num===3">深圳</div>
        <div v-else>广州</div>

        // template和v-if配合使用,且不影响代码块
        <template v-if="num===0">
            <div>123</div>
            <div>456</div>
        </template>
       

    </div>
    <script type="text/javascript">
        new Vue({
            el:"#container",
            data:{
                num:0,
                isFlag: true
            },
            methods: {
                showMessage(){
                    this.num++
                    console.log(this.num)
                }
            },
        })
    </script>
</body>
</html>
复制代码

 

　　

posted @   市丸银  阅读(6)  评论(0)  编辑  收藏  举报
相关博文：
· Vue 列表渲染
· Vue 模版语法
· Vue.js 条件渲染
· Vue 条件渲染
· Vue条件渲染
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示