Vue自定义属性

最新推荐文章于 2024-07-03 08:30:00 发布

zhangli0421

最新推荐文章于 2024-07-03 08:30:00 发布

阅读量1.9k

点赞数

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/zhangli0421/article/details/120748859

版权

本文介绍了Vue中的自定义指令功能，用于在无法使用内置指令时扩展DOM元素的功能。通过示例展示了如何创建并应用`v-red`和`v-border`两个自定义指令，分别设置背景色为红色和边框为绿色，强调了自定义指令适用于底层DOM操作的场景。

摘要由CSDN通过智能技术生成

Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。

在开始之前，我们需要明确一点，自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作，所以我们不能盲目的胡乱的使用自定义指令。

<body>
    <div id="app">
        <div v-red v-border>
            {{name}}
        </div>
    </div>
</body>
<script>
    // 自定义属性
    Vue.directive('red', {
        bind: function(el) {
            el.style.background = "red";
        }
    })
    Vue.directive('border',{
        bind:function(el){
            // border: 3px solid green;
            el.style.border = " 3px solid green";
        }
    })
    let vm = new Vue({
        el: "#app",
        data: {
            name: "漳州三",
        },
    })
</script>