vue+element button按钮绑定回车键事件

Question

<template>

<div>
    <userDetail v-if='userdetailShow'></userDetail>
    <el-button @click='detailShow'>详细信息</el-button>
</div>

</template>

data(){

return{
    userdetailShow:false
}

}

created(){

this.keyupSubmit()

},
methods: {
//监听回车事件

keyupSubmit(){
  document.onkeydown=e=>{
    let _key=window.event.keyCode;
    if(_key===13){
      this.adduser()
    }
  }
},
detailShow(){
    this.userdetailShow=true
}

}

在userdetai组件里面 有个确定的button按钮，监听回车事件代码是在userdetail组件里面的，全局绑定回车事件 组件里面的方法 adduser(){

this.userdetailShow=false
巴拉巴拉。。。。}

回车事件绑定成功 但是userdetail这个dailog 在回车事件后 组件v-if绑定的显示属性 会从 true变成false 又变成true

按照需求 以及代码逻辑 回车事件绑定的函数里面 写了this.userdetailShow=false 回车事件绑定 的函数的确都运行了 就是不知道 为什么 thsi.userdetailShow=false 后 又变成了true

但是 如果dailog这个组件 弹出来的时候 如果点击了dailog给过这个dailog焦点 这个情况就不会发生了

求问 这到底是啥原因啊……

Answer 1

你把v-if改成v-show试下！
v-if 是'真正的'条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.

v-if 也是惰性的,如果在初始渲染时条件为假,那么什么都不做- - 直到条件第一次为真的时候才会开始渲染条件块,相比之下,
v-show

就简单得多- - 不管初始条件是什么,元素总会被渲染,并且只是简单的基于css进行切换.

一般来说,v-if 有更高的切换开销,
而 v-show 有更高的出事渲染开销.因此,如果需要非常频繁的切换,那么使用v-show好一点;如果在

运行时条件不太可能改变,则使用v-if 好点.