vue 指令

最新推荐文章于 2024-11-09 21:44:05 发布

YPX_早起的鸟儿

最新推荐文章于 2024-11-09 21:44:05 发布

阅读量118

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/YPX_YGWW/article/details/121107884

版权

v-if全家桶

v-if

从用户角度看上去与v-show没有区别

作用:判断当前dom是否加载

语法:v-if="表达式(结果为布尔值)" true加载当前dom false移除当前dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demoDiv">
        <h1>v-if</h1>
        <input type="checkbox" v-model="bool">

        <h1 v-show="bool">看我是否显示v-show </h1>
        <h1 v-if="bool">看我是否显示v-if</h1>
        <!-- 对内容的隐藏 -->
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                bool:true
            },
            methods:{
              
            }
        })
    </script>
    
</body>
</html>

v-if与v-show的区别

v-if在显示和隐藏的时候是对当前dom进行移除和添加 v-if在页面初始化的时候性能损耗低,在切换的时候性能损耗高

v-show 是对于css的样式设置显示和隐藏 v-show在页面初始化的时候性能损耗高在切换的时候性能损耗低

v-else

必须配合v-if来使用当v-if条件不成立的时候执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demoDiv">
        <h1>v-else</h1>
        <h1 v-if="bool">请登录</h1>
        <h1 v-else>欢迎您尊敬的vip</h1>
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                bool:true
            },
            methods:{

            }
        })
    </script>
</body>
</html>

v-else-if

多重if选择当其中一项成立的时候执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demoDiv">
        <h1>v-else-if</h1>

       <select v-model="text">
           <option value="阅读">阅读</option>
           <option value="旅行">旅行</option>
           <option value="听歌">听歌</option>
           <option value="写作">写作</option>
           <option value="弹琴">弹琴</option>
       </select>
       
       <h1 v-if="text=='阅读'">阅读</h1>
       <h1 v-else-if="text=='旅行'">旅行</h1>
       <h1 v-else-if="text=='听歌'">听歌</h1>
       <h1 v-else-if="text=='写作'">写作</h1>
       <h1 v-else-if="text=='弹琴'">弹琴</h1>
       <h1 v-else>啥都不喜欢</h1>
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
              text:""
            },
            methods:{

            }
        })
    </script>
</body>
</html>

v-html

作用:把字符串标签解析到页面中

语法: v-html="值"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demoDiv">
        <h1>v-html </h1>

        <div>
            {{demohtml}}
        </div>
        <div v-html="demohtml"></div>

    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                demohtml:"<em>我是斜体</em>"
            },
            methods:{

            }
        })
        // 会进行文本解析把em当成标签处理
    </script>
</body>
</html>

v-once

作用:一次性插值数据插入到页面中之后就不会改变了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demoDiv">
        <h1>v-once</h1>
        <input type="text" v-model="text">
        <h1> {{text}} </h1>
        <h1> {{text}} </h1>
        <h1 v-once> {{text}} </h1>
        <h1> {{text}} </h1>
        <h1> {{text}} </h1>
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                text:"我是数据"
            },
            methods:{

            }
        })
    </script>
</body>
</html>

v-text

作用:就是在页面中插入纯文本 {{}}可以理解为和他是一样的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <style>
        /* 属性选择器 */
        /* [v-cloak]{
            display: none;
        } */
    </style>
</head>
<body>
    <div id="demoDiv" v-cloak>
        <h1>v-text</h1>

        <h1 v-text="text"></h1>

    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                text:"我是一段字符串"
            },
            methods:{

            }
        })
    </script>
    
</body>
</html>
<!-- v-text向网页中插入纯文本 -->

屏幕闪烁(用{{}}时出现的问题)

当用户网络或者设备性能较低的时候可能在vue渲染初期会在页面显示没有编译的很多{{}} 当网络通顺或者设备渲染完成之后再突然间显示最终效果就叫屏幕闪烁

解决:

1.v-text

2.v-cloak指令当前指令是会在Vue实例渲染完毕之后自动消失

 <style>
        [v-cloak]{
            display: none;
        }

    </style>
    
    <div id="demodiv" v-cloak>
       <h1>v-text</h1>
       <h1>{{num}}</h1>
       <h1 v-text="num"></h1>

     
    </div>