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

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
            <title>directives</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
        </head>
        <body>
            <div id="app">
                <input type="text" v-model="test" placeholder="请输入" v-focus v-color />
            </div>
        </body>
    </html>
    <script type="text/javascript" charset="utf-8">
        // 注册一个全局自定义指令 `v-focus`
        Vue.directive('focus', {
            // 当被绑定的元素插入到 DOM 中时
            inserted: function(el) {
                // 聚焦元素
                el.focus()
            }
        })
    
        var app = new Vue({
            el: "#app",
            data: {
                test: ''
            },
            directives: {
                // 注册一个局部自定义指令 `v-color`
                color: {
                    // 当被绑定的元素插入到 DOM 中时
                    inserted: function(el) {
                        // 背景色为红色
                        el.style.background = "red";
                    }
                }
            }
        });
    </script>
    一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱。
  • 相关阅读:
    SDN——实验脚本4-1:ovsSingleBr.py
    SDN——实验脚本4-2:ovsMultiBr.py
    SDN——实验脚本4-3:ovsVLAN.py
    C语言I博客作业01
    C语言I作业09
    C语言I作业08
    C语言I作业07
    C语言I作业06
    C语言I作业05
    C语言I博客作业04
  • 原文地址:https://www.cnblogs.com/antao/p/12985510.html
Copyright © 2011-2022 走看看