vue自定义指令（扩展的HTML）

最新推荐文章于 2024-06-16 13:00:26 发布

新手新思路新技能

最新推荐文章于 2024-06-16 13:00:26 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/u013005675/article/details/63252449

版权

指令: 扩展html语法
自定义指令:
	属性:
	Vue.directive(指令名称,function(参数){
		this.el	-> 原生DOM元素
	});
	<div v-red="参数"></div>
	指令名称: 	v-red  ->  red
 
	* 注意: 必须以 v-开头
<script>
        Vue.directive('red',function(){
            this.el.style.background='red';
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    msg:'welcome'
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <span v-red>
            这是实例
        </span>
        <span v-red>                这是实例
        </span>        <span v-red>                  这是实例
        </span>

</div></body>

实例2：

<script>
        Vue.directive('red',function(color){
            this.el.style.background=color;
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    a:'blue'
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <span v-red="a">
            asdfasd
        </span>
    </div>
实际上相当于data中的a先传给v-red中的a,然后传给自定义指令中的color，更清晰的自定义指令传参如下
<script>
        Vue.directive('red',function(color){
            this.el.style.background=color;
        });
        window.onload=function(){
            var vm=new Vue({
                el:'#box'
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <span v-red="'blue'">
            asdfasd
        </span>
    </div>
</body>
其原理都是事件绑定，如下
<script>
        Vue.directive('red',{
            bind:function(){
                this.el.style.background='red';
            }
        });
        window.onload=function(){
            var vm=new Vue({
                el:'#box'
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <span v-red>
            asdfasd
        </span>
    </div>

</body>

新手新思路新技能

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue自定义指令（扩展的HTML）

指令: 扩展html语法自定义指令: 属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); 参数"> 指令名称: v-red -> red * 注意: 必须以 v-开头script> Vue.directive('red',function(){ this.el.style.back
复制链接

扫一扫