美文网首页vue相关问题
vue自定义标签(directives)

vue自定义标签(directives)

作者: 一条小团团ovo的就很棒 | 来源:发表于2019-05-06 17:11 被阅读4次
  • 全局自定义标签的使用(任何一个实例化标签都可以使用)

    Vue.directives("focus",
    bind:function(el,binding,vnode){
    el.focus()
    }
    )
  • 私有的自定义标签的使用(只属于一个私有的实例化标签):

1.第一种写法

<template>
       <div>
            <inout type=text v-focus/>
        </div>
</template>
export default{
    data(){
        return{
        }
     },
    directives:{
        "focus":{
            bind:function(el,binding){
                el.focus()
            }
        }
      }
    }
}

2.第二种写法:

<template>
     <div>
          <input type="text"  v-border=" ' 1px solid red ' " v-model="txtInput"/>
     </div>
</template>
export default{
    data(){
        return{
            txtInput:""
        }
    },
    directives:{
        "border":{
            bind:function(el,binding){
                el.style.border=binding.value
            }
        }
    }
}

相关文章

  • vue自定义标签(directives)

    全局自定义标签的使用(任何一个实例化标签都可以使用)Vue.directives("focus",bind:fun...

  • [vue]--directives使用

    directives用法: 允许用户自定义标签,达到相应的效果。 官方说明:directives地址

  • vue2中的directives

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

  • 2021-01-26

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

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

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

  • vue-选项 / 资源

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

  • Class6 directive自定义指令

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

  • VUE进阶

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

  • 浅谈Vue.js官方文档

    打个照面: 自定义标签 嵌入原生HTML标签中去: 完了之后调用: 每个 Vue 应用都是通过用 Vue 函数创...

  • vue-api-资源

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

网友评论

    本文标题:vue自定义标签(directives)

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