Vue的其他指令

v-text

        v-text指令：
            1. 作用：向其所在的节点中渲染文本内容
            2. 与插值语法的区别： v-text 会替换掉节点中全部的内容，而{{xxx}}不会
<body>
    <div id="root">
        <h1>你好，{{name}}</h1>
        <h1 v-text="name"></h1>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:"#root",
            data:{
                name:"<h1>你好</h1>",
            }
        })
    </script>
</body>

v-html

        v-html指令：
            1. 作用：向指定节点渲染包含html结构的内容
            2. 与插值语法的区别：
                1. v-html 会替换掉节点中所有的内容，{{xx}}则不会
                2. v-html 可以识别html结构
            3. 严重注意：v-html有安全性问题！！！
                1. 再网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
                2. 一定要再可信的内容上使用V-html,永不要应用在用户提交的内容上
<body>
    <div id="root">
        <h1>你好，{{name}}</h1>
        <h1 v-html="name"></h1>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:"#root",
            data:{
                name:"<h1>你好</h1>",
            }
        })
    </script>
</body>

v-cloak

        v-cloak指令（没有值）:
            1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
            2.使用css配合v-cloak可以解决网速慢时，页面展示出{{xxx}}的问题
<body>
    <div id="root">
        <h1 v-cloak>你好，{{name}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data: {
                name: "<h1>你好</h1>",
            }
        })
    </script>
</body>

v-once

       v-once指令：
        1. v-once所在节点在初次动态渲染后，就视为静态内容了
        2. 以后数据的改变不会引起v-once 所在结构的更新，可以用于优化性能
 
<body>
    <div id="root">
        <h1 v-once>初始化的n值是{{n}}</h1>
        <h1>当前n值是{{n}}</h1>
        <button @click="n++">扣一送地狱火</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data: {
                n:1,
            }
        })
    </script>
</body>

v-pre

       v-pre指令：  
            1. 跳过其所在节点的编译过程
            2.可利用它跳过：没有使用指令语法，没有使用插值语法的节点，会加快编译
 
<body>
    <div id="root">
        <h1 v-once>初始化的n值是{{n}}</h1>
        <h1>当前n值是{{n}}</h1>
        <button @click="n++">扣一送地狱火</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data: {
                n:1,
            }
        })
    </script>
</body>
posted @   小罗要有出息  阅读(27)  评论(0)  编辑  收藏  举报
相关博文：
·  Vue基础知识
·  Vue自定义指令
·  v-text,html,cloak,once,pre
·  Vue中的内置指令
·  Vue 内置指令
阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
点击右上角即可分享
微信分享提示
AI IDE Trae