<template>
<div class="study">
<h2>當(dāng)前的n值是：<span v-text="n"></span></h2>
<h2>放大10倍后的n值是：<span v-big="n"></span></h2>
<el-button @click="n++">n++</el-button>
</div>
</template>
<script>
export default {
name: 'DirectivesStudy',
data () {
return {
n: 1
}
},
directives: {
// 方式一
// big (element, binding) {
// element.innerHTML = binding.value * 10
// },
// 方式二
big: {
// 指令與元素成功綁定時(shí)
bind (element, binding) {
element.innerHTML = binding.value * 10
},
// 指令所在元素被插入頁(yè)面時(shí)
inserted (element, binding) {
// 對(duì)父元素及兄弟元素操作
// 獲取焦點(diǎn)
},
// 指令所在模板被重新解析時(shí)
update (element, binding) {
element.innerHTML = binding.value * 10
}
}
}
}
</script>
