<template>
<div class="study">
<h2>当前的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: {
// 指令与元素成功绑定时
bind (element, binding) {
element.innerHTML = binding.value * 10
},
// 指令所在元素被插入页面时
inserted (element, binding) {
// 对父元素及兄弟元素操作
// 获取焦点
},
// 指令所在模板被重新解析时
update (element, binding) {
element.innerHTML = binding.value * 10
}
}
}
}
</script>
