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

    1、案例1

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>自定义全局和局部指令</title>
    </head>
    
    <body>
        <div id="app1">
            <p v-upper-text="msg1"></p>
            <p v-lower-text="msg1"></p>
        </div>
        <div id="app2">
            <p v-upper-text="msg2"></p>lower
            <!-- 
            v-lower-text在当前VM实例中无效,因此这里会在
            控制台报错 
            -->
            <p v-lower-text="msg2"></p>
        </div>
        <script src="../js/vue.js" type="text/javascript"></script>
        <script>
            /*
            自定义全局指定upper-text,使用时用v-upper-text,
            全局指令在所有的Vue实例中都有效
            el:指定作用的元素
            binding:包含指令相关信息数据的对象
            */
            Vue.directive("upper-text", function (el, binding) {
                el.textContent = binding.value.toUpperCase()
            });
            const vm1 = new Vue({
                el: "#app1",
                data: {
                    msg1: "Hello My Name Is Liu Yang"
                },
                directives: {
                    /*
                    自定义局部指令,只在当前Vue实例中有效,
                    lower-text有特殊字符-,因此需要使用引号包起来,
                    el:指定作用的元素
                    binding:包含指令相关信息数据的对象
                    */
                    "lower-text"(el, binding) {
                        el.textContent = binding.value.toLowerCase()
                    }
                }
            });
            const vm2 = new Vue({
                el: "#app2",
                data: {
                    msg2: "This Is My Job"
                }
            });
        </script>
    </body>
    
    </html>
  • 相关阅读:
    接口报错mixed content blocked
    重拾单片机
    部署ajax服务-支持jsonp
    linkageSystem--串口通信、socket.io
    node安装问题
    jshint之对!的检验
    node之websocket
    调试node服务器-过程
    oracle取某字符串字段的后4位
    vmware 共享文件夹
  • 原文地址:https://www.cnblogs.com/liuyang-520/p/12492235.html
Copyright © 2011-2022 走看看