函数式
- 定义一个v-big指令，v-text功能类似，但会把绑定的数值放大10倍。
<body>
<div id="app">
<div>
当前n:{{n}}
</div>
n放大10倍: <span v-big="n"></span>
<button @click="n++">n++</button>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
n : 1
}
},
directives:{
big(element, binding){
element.innerText = binding.value * 10;
}
}
})
</script>
</body>
对象式
- 定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点
<body>
<div id="app">
<!-- 定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点 -->
<input v-fbind:value="n">
<button @click="n++">n++</button>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
n : 19
}
},
directives:{
fbind:{
// 指令与元素成功绑定时（一上米）
bind(element, binding){
element.value = binding.value;
},
// 指令所在元素被插入页面时
inserted(element, binding){
element.focus();
},
// 指令所在的模板被重新解析时
update(element, binding){
element.value = binding.value;
}
}
}
})
</script>
</body>
扫一扫
936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
