vue根据条件显示不同的按钮,vue设置按钮不可点击

　　本文主要介绍vue如何根据条件判断按钮是否可以点击，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

根据条件判断按钮是否可以点击

　　当按钮在特定环境下无法点击时，需要根据判断控制点击事件。

方法一：使用v-if 、v-else 来判断

　　模板

　　差异

　　el-button v-if=！禁用/el按钮

　　El-button v-else @ click= get detail()/El-button

　　/div

　　/模板

方法二：增加一个变量，判断

　　模板

　　el-button @click=！is disabled get detail()/El-button

　　/模板

　　脚本

　　data(){

　　返回{

　　IsDisabled:true，//为真时可以点击，为假时不能点击。

　　}

　　/脚本

　　两种方法都可以，但第二种方法代码相对较少。怎么用，看个人习惯。

vue判断点击当前元素

　　点击按钮，出现弹窗；然后点击遮罩层，当前弹窗消失。

　　起初，click事件会绑定在mask层上，但在这种情况下，当窗体表单被单击时，当前的弹出窗口会消失。

需要判断你是点击了遮罩层还是form表单

　　1.将click event @ click=" show fun 2($ event)"绑定到遮罩层

　　 div class= top from v-show= msg @ click= show fun 2($ event)

　　！-子组件-

　　Fromdemo btndata=点击咨询/fromdemo

　　/div

　　2.确定当前元素e.currentTarget===e.target是否已被单击。

　　showfun2(e) {

　　if(e . current target===e . target){

　　this.msg=false

　　}

　　以上完成了对当前事件的click元素的判断。

接下来是分别对e.currentTarget、e.target打印

　　showfun2(e) {

　　console.log(如当前目标)

　　console.log(e.target)

　　第一次点击遮罩层

　　第二次点击 form表单

　　发现e.currentTarget打印的总是绑定点击事件的元素。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。