zoukankan      html  css  js  c++  java
  • Vue自定义指令

    使用Vue.directive();

    1.直接自定义名称 :red

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
      
        </style>  
        <script src="vue.js"></script>  
        <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>  
                asdfasd  
            </span>  
        </div>  
      
    </body>  
    </html>  

    效果:

    2.使用v-名称,在data中设置属性

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
      
        </style>  
        <script src="vue.js"></script>  
        <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>  
      
    </body>  
    </html>  

    3.使用v-名称,直接设置属性名称

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
      
        </style>  
        <script src="vue.js"></script>  
        <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>  
    </html>  

    效果:

     

    5.Vue自定义拖拽指令

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
        </style>  
        <script src="vue.js"></script>  
        <script>  
            Vue.directive('drag',function(){  
                var oDiv=this.el;  
                oDiv.onmousedown=function(ev){  
                    var disX=ev.clientX-oDiv.offsetLeft;  
                    var disY=ev.clientY-oDiv.offsetTop;  
      
                    document.onmousemove=function(ev){  
                        var l=ev.clientX-disX;  
                        var t=ev.clientY-disY;  
                        oDiv.style.left=l+'px';  
                        oDiv.style.top=t+'px';  
                    };  
                    document.onmouseup=function(){  
                        document.onmousemove=null;  
                        document.onmouseup=null;  
                    };  
                };  
            });  
      
            window.onload=function(){  
                var vm=new Vue({  
                    el:'#box',  
                    data:{  
                        msg:'welcome'  
                    }  
                });  
            };  
      
        </script>  
    </head>  
    <body>  
        <div id="box">  
            <div v-drag :style="{'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>  
            <div v-drag :style="{'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>  
        </div>  
      
    </body>  
    </html>  
  • 相关阅读:
    ORA-01536: 超出表空间 'tablespace_name' 的空间限额
    Oracle数据库表索引失效,解决办法:修改Oracle数据库优化器模式
    解决response.setHeader("Content-disposition" 中文乱码问题
    MyBatis配置:在控制台打印SQL语句
    JS 字符串转日期格式 日期格式化字符串
    远程桌面管理工具Remote Desktop Connection Manager
    调整Windows操作系统下时间同步的频率
    Oracle数据库中字符型字段按数字排序
    “Error:(1, 1) java: 非法字符: 'ufeff'”错误解决办法
    本次孩子流感总结
  • 原文地址:https://www.cnblogs.com/chaofei/p/7709119.html
Copyright © 2011-2022 走看看