vue 特定条件下绑定事件

ゝ一纸荒年。 2023-06-10 10:28 7阅读 0赞

今天写了个小功能，看起来挺简单，写的过程中发现了些坑。
    1.div没有disabled的属性，所以得写成button
    2.disabled在data时，默认是true，使得初始化时，默认置灰按钮，无法点击

<div class='form-item'>
        <div class="checkWrap clearfix" @click='checkMark()'>
            <div class="checkBox" v-show="checkShow"></div>
        </div>
        <div>我已阅读并接受<a href="http://www.baidu.com" @click="conserve()">《xxx服务协议》</a>及隐私保护条款</div>
    </div>
    <button class='btn' ref='btn_submit' :disabled="isDisable" @click="check()"> 提交 </button>
    export default { data() { return { 　　　　　　　checkShow: false, isDisable: true, 　　　　} 　　}，

methods: {
    　　
    /**
     *  协议勾选
     */
    checkMark() {
        this.checkShow = !this.checkShow;
        if (this.checkShow === true) {  
            this.isDisable = false;  //打勾时，可以点击按钮
            this.$refs.btn_submit.style.background = '#fa8919';
        } else {
            this.isDisable = true;   //不打勾时，不可以点击按钮
            this.$refs.btn_submit.style.background = '#999';
        }
    },
    /**
     *     提交按钮
     */
    　　　check() {
    　　　　　　if (this.checkShow === false) {
                        console.log('不能提交');
                    } else { 
                        console.log('能提交');
                    }
    　　　　　　}
    　　　}
    }

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue-组件自定义事件(绑定和解绑)

组件自定义事件(绑定) 像click,change这些都是js的内置事件，我们可以直接使用，本次我们学习自己根据需求打造全新的事件，但是js内置的是给html元素用的,本

分手后的思念是犯贱/ 2023年10月12日 19:36/ 0 赞/ 88 阅读

相关 vue键盘事件：@keyup.down下方向键绑定事件

> @keyup.13 回车 > > @keyup.enter 回车 > > @keyup.left 左键 > > @keyup.right 右键 > > @keyup

逃离我推掉我的手/ 2023年10月02日 17:25/ 0 赞/ 9 阅读

相关 vue事件绑定

@dblclick.native 绑定原生事件，可改成@dblclick.native="handle" 然后在methods中写handle方法 <templat

朴灿烈づ我的快乐病毒、/ 2023年07月13日 15:15/ 0 赞/ 20 阅读

相关 vue 特定条件下绑定事件

今天写了个小功能，看起来挺简单，写的过程中发现了些坑。 1.div没有disabled的属性，所以得写成button 2.disabled在data时，

ゝ一纸荒年。/ 2023年06月10日 10:28/ 0 赞/ 8 阅读

相关 vue鼠标事件绑定

1.绑定vue的根节点，所有vue操作的对象都在这个根节点中 ![在这里插入图片描述][20191009220005473.png] 2.初始化vue,el为绑定的根

心已赠人/ 2023年06月06日 03:51/ 0 赞/ 32 阅读

相关 Vue 事件绑定

v-on指令用法： <button type="button" v-on:click ="num++">点击</button> v-on 可用@代替 @click

谁借莪１个温暖的怀抱￠/ 2023年03月12日 09:07/ 0 赞/ 34 阅读

相关 php 事件绑定,php实现事件绑定

class EventHandle \{ private static $\_map = array(); //类似jquery绑定事件 public function

谁践踏了优雅/ 2022年11月12日 12:54/ 0 赞/ 339 阅读

相关 vue(2)事件绑定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

我会带着你远行/ 2022年10月02日 11:44/ 0 赞/ 252 阅读

相关 vue 事件绑定

<!DOCTYPE html> <html> <head> <meta charset="utf-8" />

末蓝、/ 2022年05月31日 09:57/ 0 赞/ 327 阅读

相关 Vue之绑定事件

绑定事件 v-on:click 简写：@click；为button添加一个change的点击事件，改变content的值 <div> <div cla

喜欢ヅ旅行/ 2022年04月22日 10:24/ 0 赞/ 336 阅读