Vue插值指令3

最新推荐文章于 2024-02-06 15:28:42 发布

m0_44974944

最新推荐文章于 2024-02-06 15:28:42 发布

阅读量138

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_44974944/article/details/108782441

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue插值指令3

1.v-if、v-else

v-if条件为false时，不会有元素在dom中。（当只有一次切换时，使用v-if）

<body>
    <div id="app">
        <h2 v-if="scroce>=90">优秀</h2>
        <h2 v-else-if="scroce>=80">很好</h2>
        <h2 v-else="scroce>=70">可以</h2>
        <h2>{{reaslt}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                scroce:90
            },
            computed:{
                reaslt(){
                    let who = "";
                    if(this.scroce>=90){
                        who="优秀";
                    }else if(this.scroce>=80){
                        who="很好";
                    }else{
                        who="可以";
                    }
                    return who;
                }
            },
        })
    </script>
</body>

在这里插入图片描述

2.v-show

v-show当条件为false时，仅仅是将元素dispaly属性设置为none。（需要在显示与隐藏之间切换频繁时使用v-show）

<body>
    <div id="app">
        <h2 v-show="isShow">{{message}}</h2>
        <h2 v-if="isShow">{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                message:'海燕！',
                isShow:true,
            },
        })
    </script>
</body>

在这里插入图片描述

3.key

问题：在两个input框进行切换时，里面的文字内容不随着框的变化发生改变。
原因：由于Vue在进行DOM渲染时，出于性能考虑，尽可能的复用已经存在的元素，而不是创建新元素。
解决方法：加上一个唯一的key对应数据，key得保证内容是唯一性。

<body>
    <div id="app">
        <span v-if="isUser">
            <label for="username">用户登录</label>
            <!-- 解决元素复用使用key -->
            <input type="text" id="username" placeholder="用户登录" key="a">
        </span>
        <span v-else>
            <label for="useremail">邮箱登录</label>
            <input type="text" id="useremail" placeholder="邮箱登录"  key="b">
        </span>
        <button @click="isUser = !isUser">点击切换</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                isUser:true
            },
        })
    </script>
</body>

在这里插入图片描述

m0_44974944

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue插值指令3

Vue插值指令31.v-if、v-else v-if条件为false时，不会有元素在dom中。（当只有一次切换时，使用v-if）<body> <div id="app"> <h2 v-if="scroce>=90">优秀</h2> <h2 v-else-if="scroce>=80">很好</h2> <h2 v-else="scroce>=70"&
复制链接

扫一扫