vue自定义指令

最新推荐文章于 2024-09-25 09:46:48 发布

风继续吹&

最新推荐文章于 2024-09-25 09:46:48 发布

阅读量162

点赞数 1

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_48930299/article/details/117457489

版权

vue.js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

局部指令

<template>
  <div>
      <div v-color='c'>123123</div>
      <div v-color="'pink'">hello</div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            c:'red'
        }
    },
    // directives:{
    //     color:{
    //         inserted(el,binding){
    //             // console.log(binding)
    //             el.style.color=binding.value
    //             // console.log(el.style.color='red')
    //         }
    //     }
    // }
}
</script>

<style>

</style>

全局自定义指令在main.js

//自定义全局指令
Vue.directive('color', {
  inserted(el, binding) {
    // console.log(binding)
    el.style.color = binding.value
    // console.log(el.style.color='red')
  }
})