怎么用网站做word文件格式整站优化快速排名
自定义指令参数修饰符值
在vue3中我们如何获取自定义的参数的内容,并根据业务来修改展示的内容呢,需要依靠mounted
方法中的bindings
参数来获取。
参考实例
directives/unit.js文件
export default function directiveUnit(app){app.directive("unit",{mounted(el,bindings){const defaultText = el.textContentlet unit = bindings.valueif(!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>
感谢大家观看,我们下次再见