vue脚手架中创建自定义指令

Posted 2021-11-09 老张在线敲代码

局部自定义指令直接在组件内部创建

<template>
    <div>
        <p v-upper-text="name"></p>转大写
        <p v-lower-text="name"></p>转小写
    </div>
</template>
<script>
    export default{
        data(){
            return{
                name:'Jack'
            }
        },
        directives:{//定义局部指令
        // el:指令属性所在的标签对象
		// binding包含指令相关信息数据的对象
            "lower-text":function(el,binding){
                el.textContent = binding.value.toLowerCase()
            }
        }
    }
</script>

定义全局指令直接在main.js中写入

// el:指令属性所在的标签对象
// binding包含指令相关信息数据的对象
Vue.directive("upper-text",function(el,binding){
    console.log(el,binding)
    el.textContent = binding.value.toUpperCase()
})