(1)函数式
需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。
接下来我们就来写下这个自定义的指令吧
<body>
<!--准备好一个容器-->
<div id="root">
<h2>当前的n值为<span v-text="n"></span></h2>
<h2>放大后的n值为<span v-big="n"></span></h2>
</div>
<script>
Vue.config.productionTip = false; //阻止 vue在启动时生成生产提示。
const x = new Vue({
el: "#root",
data: {
n: 10,
},
directives: {
big(element, binding) {
element.innerText = binding.value * 10;
},
},
});
</script>
</body>