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

    <!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

    <!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('a-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 a-red>
                asdfasd
            </span>
        </div>
    
    </body>
    </html>

    3

    <!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>
            <span v-red>
                asdfasd
            </span>
            <span v-red>
                asdfasd
            </span>
        </div>
    
    </body>
    </html>

    4

    <!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>

    5

    <!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>

    6

    <!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',{
                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>
    </html>
  • 相关阅读:
    Python3 字符串格式化
    TypeError: Object of type 'int32' is not JSON serializable
    论文学习——《Learning to Compose with Professional Photographs on the Web》 (ACM MM 2017)
    python中PIL.Image,OpenCV,Numpy图像格式相互转换
    python 在列表,元组,字典变量前加*号
    python指定概率随机取值 理解np.random.seed()
    论文学习——《Good View Hunting: Learning Photo Composition from Dense View Pairs》
    目标检测知识杂点
    VGG16学习笔记
    python png与jpg的相互转换
  • 原文地址:https://www.cnblogs.com/lanlanJser/p/7420906.html
Copyright © 2011-2022 走看看