Vue3自定义指令参数修饰符值(3)
发表于:2024-06-23 15:19:09浏览:84次
自定义指令参数修饰符值
在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>
感谢大家观看,我们下次再见