美文网首页
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;
                }
            }
        })
    

    相关文章

      网友评论

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

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