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

    1.main.js 文件中定义全局指令

    import Vue from 'vue'
    import App from './App'
    Vue.config.productionTip = false

    //定义全局指令
    Vue.directive('focus',{
    inserted:function(el){
    el.focus()
    }
    })
    /* eslint-disable no-new */
    new Vue({
    el: '#app',
    components: { App },
    template: '<App/>'
    })

    2.页面引用和局部指令

    <template>
    <div>
    全局指令:<input type="text" name="" id="" value="" v-focus/>
    局部指令:<input type="text" name="" id="" value="" v-focus1/>
    <p v-fontCss>自定义指令字体颜色</p>
    </div>
    </template>

    <script>
    export default {
    name: 'input1',
    data() {
    return {
    msg: '子组件数据'
    }
    },
    directives:{
    focus1:{
    inserted:e1=>{
    e1.focus()
    }
    },
    fontCss:e1=>{
    e1.style.color='red'
    }
    }
    }
    </script>

    <style>

    </style>

  • 相关阅读:
    GO 函数的参数
    GO 函数
    GO 指针
    GO 结构体
    GO 接口
    码云git常用命令
    GO Map的初步使用
    GO Slice
    GO 数组
    GO 键盘输入和打印输出
  • 原文地址:https://www.cnblogs.com/qiyc/p/9127165.html
Copyright © 2011-2022 走看看