35.Vue自定义指令函数式-CFANZ编程社区

35.Vue自定义指令函数式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>当前的值为:<span v-text="n"></span></h2>
			<h2>放大10倍后的值是:<span v-big="n"></span></h2>
			<button type="button" @click="n++">n++</button>
		</div>
	</body>
</html>

<script type="text/javascript">
	new Vue({
		el: '#root',
		data: {
			n: 1
		},
		directives: {
			// big函数何时会被调用?1.指令与元素成功绑定时(一开始)
			// 2.指令所在的模板被重新解析时调用(数据更新时模板被重新解析)
			big(element, binding) { //element返回v-big绑定的Dom
				console.dir(element, binding);
				console.log(element instanceof HTMLElement); //判断element是否为HTMLElement的实例
				element.innerText = binding.value * 10; //操作当前节点修改数值
			}
		}
	})
</script>

0 条评论