vue3自定义指令

首页>> web前端 >>vue3自定义指令 - 前端笔记

2023-1-12

分类： web前端

文章作者：痴迷

效果图 1. main.js import { createApp } from 'vue' import './style.css' imp......

效果图

1. main.js

		import { createApp } from 'vue'
	
		import './style.css'
	
		import App from './App.vue'
	
		const app = createApp(App)
	
		// 设置颜色
	
		app.directive("setColor",{
	
		    mounted(el,bind){
	
		        console.log(el,bind);
	
		        el.style.color = bind.value
	
		    }
	
		})
	
		app.mount('#app')

2. app.vue

		<template>
	
		<button v-setColor="'red'">自定义指令--按钮红色</button>
	
		<button v-setColor="'blue'">自定义指令--按钮蓝色</button>
	
		</template>
	
		<script setup>
	
		</script>
	
		<style scoped>
	
		</style>