Vue 中自带指令（v-text、v-if、v-on、 v-bind等）解析（封装方法）

最新推荐文章于 2021-06-18 03:04:08 发布

飘走的落不离

最新推荐文章于 2021-06-18 03:04:08 发布

阅读量628

点赞数

本文链接：https://blog.csdn.net/gebieren/article/details/106698311

版权

vue中自带指令分为三类，第一类是只有指令名的，如v-text、v-html、v-if等，第二类是指令名+参数的，如v-bind：class。第三类是指令名+参数+修饰符的，如v-on:click.stop。类别不同，所产生的功能就有所不一样，下面就通过自定义指令v-mytext,v-myon与v-mybind来实现v-text,v-on,v-bind的一样的功能。

v-mytext 指令

	<body>
		<div id="app">
			<h2>我是文字</h2>
			<hr />
			自定义指令v-mytext:<span v-mytext="msg">我是文字</span>
			<hr />
			vue自带指令v-text:<span v-text="msg">我是文字</span>
		</div>
		<script src="vue.js"></script>
		<script>
			//注册一个全局自定义指令 `v-mytext`
			Vue.directive("mytext", {
				bind(el, binding) {
					el.innerText = binding.value;
				},
				update(el, binding) {
					el.innerText = binding.value;
				},
			});
			const vm = new Vue({
				el:

最低0.47元/天解锁文章

飘走的落不离

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 中自带指令（v-text、v-if、v-on、 v-bind等）解析（封装方法）

vue中自带指令分为三类，第一类是只有指令名的，如v-text、v-html、v-if等，第二类是指令名+参数的，如v-bind：class。第三类是指令名+参数+修饰符的，如v-on:click.stop。类别不同，所产生的功能就有所不一样，下面就通过自定义指令v-mytext,v-myon与v-mybind来实现v-text,v-on,v-bind的一样的功能。v-mytext 指令 <body> <div id="app"> <h2>我是..
复制链接

扫一扫