Vue3自定义指令参数修饰符值(3)

自定义指令参数修饰符值

在vue3中我们如何获取自定义的参数的内容，并根据业务来修改展示的内容呢,需要依靠mounted方法中的bindings参数来获取。

参考实例
directives/unit.js文件

export default function directiveUnit(app){
  app.directive("unit",{
    mounted(el,bindings){
      const defaultText = el.textContent
      let unit = bindings.value
      if(!unit){
        unit = "¥"
      }
      el.textContent = unit + defaultText;
    }
  })
}

同时我们需要在directives/index.js中引入

import directiveUnit from "./unit"

export default function directives(app) {
  directiveUnit(app)
}

这里是我们的示例文件

<template>
  <div class="app">
    <!-- 1.参数-修饰符-值  -->
     <h2 v-why:kobe.abc.cba="message">哈哈哈</h2>
     <!-- 2.价格拼接单位符号 -->
      <h2 v-unit>{{ 111 }}</h2>
  </div>
</template>  
<script setup>
import { ref } from 'vue';

const counter = ref(0)

const message = 'Hello world';
const vWhy = {
  mounted(el,bindings){
    console.log(bindings);
    el.textContent = bindings.value;
  }
}
</script>
<style scoped>
</style> 

感谢大家观看，我们下次再见