用自定义指令来操控dom
// 写在main.js中
const app = createApp(App)
app.directive('font', {
beforeMount: (el, binding) => {
let size = 12
if (binding.modifiers.small) {
size = 8
} else if (binding.modifiers.large) {
size = 50
}
if (binding.modifiers.red) {
el.style.color = '#f00'
}
el.style.fontSize = size + 'px'
}
})
// 使用自定义指令:使用modifiers创建的自定义指令应该用"."而不是":"
<div ref="box" v-font.large.red></div>
使用之后的效果