zoukankan      html  css  js  c++  java
  • vue(8)

    我们都知道v-for、v-html、等等都是指令:扩展html 语法

    自定义指令:

    属性指令

    Vue.deirctive(指令名称,function(){

      this.el ==>原生的dom元素

    })

    <div id="box">
    	<span v-red>1222</span>
    </div>
    
    <script>
    	Vue.directive('red',function(){
    		this.el.style.background="red"
    	});
    
    	new Vue({
    		el:"#box",
    		data:{}				
    	})
    </script> 

    或者用参数的方法

    <div id="box">
    	<span v-red="'blue'">1222</span>
    </div>
    
    <script>
    	Vue.directive('red',function(color){
    		this.el.style.background=color
    	});
    
    	new Vue({
    		el:"#box",
    	})
    </script>  

    指令名称: v-red ===> red

    需要注意的必须以v-开头

    自定义元素的指令(用处不是很大)

    Vue.elementDirecitive(“zns-red”,{

      bind:function(){

        this.el.style.background="red";

      }

    })

    <div id="box">
    	<zns-red>1222</zns-red>
    </div>
    
    <script>
    	Vue.elementDirective('zns-red',{
    		bind:function(){
    			this.el.style.background='red'
    		}
    		
    	});
    
    	new Vue({
    		el:"#box",
    
    	})
    </script>
    

      

  • 相关阅读:
    pip本地源搭建
    linux 创建 bootable iso 文件
    yum 源本地化 (two)
    linux 网络配置
    linux 设置root可以远程登陆
    察看linux 发行版
    mysql bin-log 设置
    samba 奇怪问题
    delphi中的临界区
    ligerGrid 取得选中行的数据
  • 原文地址:https://www.cnblogs.com/sun927/p/7275820.html
Copyright © 2011-2022 走看看