自定义v-color指令

 

在自定义指令的时候，和js行为有关的，最好就写在inserted中去，防止js代码不生效。
和样似有关的操作放在bind中去
Vue.direactive 【d儿 Rai K T V】 没有s哈




 


复制代码


<body>
    <div id="app">
        <input type="text" value="" v-color="'red'">
        //注意red有单引号和双引号，red变量要使用单引号扩起来哈
         
    </div>

    <script>
        Vue.directive("color", { //【d儿 Rai K T V】
            bind: function (el, binging) {
                el.style.color = binging.value; //接受颜色
                console.log(binging) //Object {name: "color", rawName: "v-color", value: "red", expression: "'red'",
            },
            inserted: function (el) {

            },
            updated(el) {//[a p dei ti d]
                //当v-model跟新的时候，就会执行这个函数  这个函数会执行多次  
            },
        })

        var vm = new Vue({
            el: "#app",
            data: {

            }
        });
    </script>
</body>


复制代码


 







            

            
posted @ 
 
南风晚来晚相识 
阅读(499) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· 开发者必知的日志记录最佳实践
    

· SQL Server 2025 AI相关能力初探
    

· Linux系列：如何用 C#调用 C方法造成内存泄露
    

· AI与.NET技术实操系列（二）：开始使用ML.NET
    

· 记一次.NET内存居高不下排查解决与启示
    



    

    阅读排行：
    

 ·          开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
        

 ·          Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
        

 ·          被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
        

 ·          没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
        

 ·          园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
        



    

    



	

	

	
	

	

	

	





    

        

    


    
    








  

  
点击右上角即可分享

  微信分享提示

   
    
❉
❉
❉