v-select 触发一次

场景说明

场景： 双击文本，变成输入框，以实现修改文本框

具体细节： 在输入框出现时，将输入框的文本选中，且只触发select一次

方法一：update----v-show

v-show值为false则display:none，一开始就已经插入dom树中，当其值为true时，会移除display:none属性，会触发update钩子函数

• 如果为input框绑定的v-model，输入框的内容每次发生变化，都会触发input事件，只要值发生了变化就会不断的触发update钩子函数

• 所以通过binding让v-select指定只触发一次

注册全局自定义指令

Vue.directive('select', {
    update(el, binding) {
        // item.id==isEdit一开始是 false，当双击后 就是true，直到修改完成才变回false
        if (binding.oldValue != binding.value) {
            el.select()
        }
    }
})

vue组件

<!-- 文本-->
<!-- 双击 将isEdit设置为当前id（isEdit默认值为-1） -->
<label v-show="item.id!=isEdit" @dblclick="isEdit=item.id" v-model="text">{{item.name}}</label>

<!--input框-->
<!--isEdit一开始渲染到页面上是 false，双击文本时 才修改为item.id-->
<input type="text" v-show="item.id==isEdit" v-select="item.id==isEdit"/>

方法二：inserted----v-if

v-if值为false，一开始不会插入渲染到dom树中，当其值为true时会插入到dom树中，并触发inserted钩子函数，且只触发一次

注册全局自定义指令

Vue.directive('select', {
    inserted(el) {
        el.select()
    }
})

vue组件

<!-- 文本-->
<!-- 双击 将isEdit设置为当前id（isEdit默认值为-1） -->
<label v-if="item.id!=isEdit" @dblclick="isEdit=item.id" v-model="text">{{item.name}}</label>

<!--input框-->
<!--isEdit一开始渲染到页面上是 false，双击文本时 才修改为item.id-->
<input type="text" v-if="item.id==isEdit" v-select/>