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>
    一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱。
  • 相关阅读:
    hosts 文件妙用
    asp.net 各种路径
    正则表达式
    int.Parse()、int.TryParse()和Convert.ToInt32()的区别
    总结.NET 中什么时候用 Static
    利用.net的内部机制在asp.net中实现身份验证
    server.transfer 用法
    sql server Datetime格式转换
    如果在代码中使用JS
    js 添加广告
  • 原文地址:https://www.cnblogs.com/antao/p/12985510.html
Copyright © 2011-2022 走看看