美文网首页
Vue的自定义指令(directives)

Vue的自定义指令(directives)

作者: 葛明路 | 来源:发表于2020-03-24 20:22 被阅读0次

directives自定义指令,是一个对象,属性就时自定义指令的名称,对象的值是一个函数
函数的第一个参数是使用这个指令的元素,参数2是传递过来的值

    var vm = new Vue({
        el:'#app',
        data:{
            bookList: ['神雕侠侣','射雕英雄传','倚天屠龙记']
        },
        // directives是一个对象,里面是方法也是自定义指令名
        directives:{
            // 参数1是使用这个指令的元素
            red(el){
                console.log(el)
                el.style.background = "red"
            },
            blue(el){
                el.style.background = "blue"
            },
            frenchquotes(el){
                el.innerHTML = "《"+el.innerHTML+"》"
            },
            // 第二个形参是在调用时传递的
            color(el,rgb){
                el.style.background = rgb.value;
            }
        }
    })

相关文章

  • vue2中的directives

    directives: 用于自定义vue指令 注册全局自定义指令:调directive(id, fun) 注册局部...

  • 2021-01-26

    vue中自定义拖拽指令 指令(局部指令) directives:{ drag(el,bindings){ el.o...

  • vue-选项 / 资源

    directives 类型:Object 详细: 包含 Vue 实例可用指令的哈希表。 参考:自定义指令 filt...

  • vue3.2 setup 之局部自定义指令

    在vue3.x中,注册局部自定义的指令是在setup方法外面,directives下面便可自定义指令,那在vue3...

  • VUE进阶

    封装自定义vue指令 1. 封装输入框自动聚焦指令 在utils工具包中创建directives.js文件复制自动...

  • vue学习(25)自定义指令

    知识点 1:局部指令new Vue({directives:{指令名,配置对象}})new Vue({direct...

  • vue-api-资源

    directives 自定义 指令 filters 过滤器 (管道)

  • vue中实现div自由拖拽

    给div绑定一个自定义指令v-drag 给div设置绝对定位 写自定义指令 //自定义指令 directives:...

  • Vue的自定义指令(directives)

    directives自定义指令,是一个对象,属性就时自定义指令的名称,对象的值是一个函数函数的第一个参数是使用这个...

  • Class6 directive自定义指令

    Directive对元素标签进行自定义指令封装 自定义指令定义 1.自定义集合关键字directives,可定义多...

网友评论

      本文标题:Vue的自定义指令(directives)

      本文链接:https://www.haomeiwen.com/subject/nvmayhtx.html