VUE学习：vue基础09————VUE语法对内容处理：静态指令和动态指令

本文深入探讨Vue2.6中的静态指令v-once和动态特性，v-once仅渲染数据一次，后续变更不更新，而动态特性如v-bind允许动态绑定属性。通过实例展示了如何使用这些特性，并提到了动态参数的注意事项，如值为null时清除属性，动态参数避免参与计算等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：
本文为VUE栏目：VUE学习：vue基础09————VUE语法对内容处理：静态指令和动态指令

VUE学习：vue基础09————VUE语法对内容处理：静态指令和动态指令

前言
静态指令和动态指令
- v-once静态指令
- 动态特性

前言

本文继续学习VUE语法对内容的处理。

提示：以下是本篇文章正文内容，下面案例可供参考

静态指令和动态指令

Vue2.6新增新特性。静态指令和动态指令。

v-once静态指令

v-once指令称为静态指令，被他标记的标签，调用data中的属性，只会渲染一次，后续data内容发生变化，替他不会重新渲染

<body>
    <div id="app">
        <p v-once :title="msg">{{msg}}</p>
        <p :title="msg">{{msg}}</p>
        <button type="button" @click="changeText">变变变</button>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "我是静态指令",
        },
        methods: {
            changeText() {
                this.msg = "vue新特性"
            }
        }
    });
</script>

运行结果：
在这里插入图片描述
运行后：

动态特性

<body>
<div id="app">

    <a :href="url">百度</a>
  
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            url: 'https://www.baidu.com',
        },
        methods: {
        }
    });
</script>

v-bind绑定的属性名可以从data中获取，但是必须要使用中括号

切记：

动态参数的值为null表示清除这个属性
动态参数不存在表现为null，而不是undefined
动态参数中尽量不要参与计算

<body>
<div id="app">
    <a v-bind:[attr]="url">百度</a>
    <a v-bind:[attrs]="url">百度</a>
<!--    <a :href="url" :[tar+get]="'_blank'">百度</a>-->
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            attr: "href",
            url: 'https://www.baidu.com',
            attrs: null,
        },
        methods: {
        }
    });
</script>

html中规定，标签和属性名忽略大小写，现阶段默认会把所有的属性转换成全小写

例如：这里虽然引用的是myAttr，但是data中必须存在myattr变量才可用

<body>
<div id="app">
    <p :[myattr]="myattr">{{wyz}}</p>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            myattr: "我系吴彦祖",
            wyz: "吴彦祖",

        },
        methods: {
        }
    });
</script>