函数式
<template>
<div>
<span>当前值是</span>
<span v-text="n"></span>
<span>当前值加10</span>
<!-- 函数式 -->
<span v-addFun="n"></span>
<span>当前值加10,并且自动获取焦点</span>
<!-- 对象式 -->
<input type="text" v-addObj="n">
<button @click="()=>{
n++
}">n++</button>
</div>
</template>
<script>
export default {
data() {
return {
n:1
};
},
directives:{
addFun(element,binding){
element.innerText = binding.value + 10
},
addObj:{
bind(element,binding){
element.value = binding.value + 10
},
inserted(element,binding){
element.focus()
},
update(element,binding){
element.value = binding.value + 10
}
}
}
};
</script>