Vue自定义属性

最新推荐文章于 2024-05-16 13:34:27 发布

zhangli0421

最新推荐文章于 2024-05-16 13:34:27 发布

阅读量1.8k

点赞数

文章标签： vue.js javascript html

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

版权

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>

zhangli0421

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue自定义属性

Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。在开始之前，我们需要明确一点，自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作，所以我们不能盲目的胡乱的使用自定义指令。<body> <div id="app"> <div v-red v-border> .
复制链接

扫一扫