今天写了个小功能,看起来挺简单,写的过程中发现了些坑。
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('能提交');
}
      }
   }
}

vue 特定条件下绑定事件的更多相关文章

  1. Vue框架之双向绑定事件

    Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...

  2. vue form表单绑定事件与方法

    使用v-on绑定事件 <button @click="hello">Hello</button><br /> <button @click ...

  3. Vue根据条件添加 click 事件

    方式一:在绑定事件中直接添加标示量clickFlag <div @click="clickFlag && addGoodsHandler()"> XXX ...

  4. vue系列--vue是如何实现绑定事件

    一.前言 vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法. 二.事件绑定方式 ...

  5. spring4.0之五:@Conditional在满足特定条件下,才会实例化对象

    这篇文章介绍Spring 4的@Conditional注解. 一.在Spring的早期版本你可以通过以下方法来处理条件问题 3.1之前的版本,使用Spring Expression Language( ...

  6. 特定条件下批量解压文件改变编码,顺便修改.so.0找不到等一些小问题

    直接结论: 1.linux解压文件乱码: unzip -O GBK *.zip 2.linux改变文件内容编码: 安装enca,下载地址:https://github.com/nijel/enca/i ...

  7. Chrome插件Visual Event查看Dom元素绑定事件的利器

    找这工具找了好久,统一找着了,开发人员不可多得的好东东,收藏做一下分享. 用Chrome插件Visual Event查看Dom绑定的事件 Visual Event简介 Visual Event是一个开 ...

  8. jQ给下拉框绑定事件,为什么要绑定在框(select标签)上,而不是绑定在选项(option标签)上

    这是我在学习锋利的 jquery 书中 5.1.4 的代码时遇到的一个小问题,源代码如下: <head> <style type="text/css"> * ...

  9. vue使用svg,animate事件绑定无效问题及解决方法

    由于使用svg制作圆形进度条,但是进度展示的太生硬,没有过渡圆滑的效果,所以使用 animate(在svg元素里可以查到) 元素标签,但 这样使用了,还是没有效果,我前端使用的 vue ,所以通过 @ ...

随机推荐

  1. HDFS开发中的一些问题(逐步补充)

    1.windows操作系统下运行时报:Failed to locate the winutils binary in the hadoop binary path   java.io.IOExcept ...

  2. mac 下安装 mariadb

    通过brew 安装: brew install mariadb 初始化数据库 cd /usr/local/Cellar/mariadb/10.0.10/scripts mysql_install_db ...

  3. map 解析

    Observable.of(1, 2, 3) .map { $0 * $0 } .subscribe(onNext: { print($0) }) .disposed(by: disposeBag) ...

  4. MongoDB 学习笔记(七):主从复制与副本集

    一.主从复制 1.主从复制是一个简单的数据库同步备份的集群技术,如下图:要明确的知道主服务器与从服务器,且从服务器要明确的知道主服务器的存在. 2.在MongoDB中在启动数据库服务时,可以用mast ...

  5. vc++如何创建程序01

    1 .选择文件+新建(ctrl+N),然后选择一个空的工程,完成 2 然后在选择file新建,在files文件下面选择一个C++Source File,并取个文件名(比如为point可以不带.c) 我 ...

  6. php libevent扩展的简单用例

    php libevent扩展具有很强大的功能.以下摘自百度百科: Libevent 是一个用C语言编写的.轻量级的开源高性能网络库,主要有以下几个亮点:事件驱动( event-driven),高性能; ...

  7. Aeroplane chess HDU - 4405_数学期望_逆推

    Code: #include<cstdio> #include<algorithm> #include<cstring> using namespace std; ...

  8. 路飞学城Python-Day113

      107-HTTP协议的无状态保存 什么是无状态保存? HTTP无状态请求就是客户端每次发送的请求都是单独的新请求,每一次请求都是独立的,这样的特点在网站上就是服务器登录的时候记录浏览器的信息,建立 ...

  9. prevent阻止标签默认行为&stop阻止事件冒泡

    <form id="vm" v-on:submit.prevent="register"> 1.prevent是preventDefault,阻止标 ...

  10. PowerDesigner工具

    PowerDesigner是一款数据库设计与建模工具,开发人员可以在上面设计表结构,而不用一开始就创建数据库中的表,因为设计阶段数据库表结构会经常变动.设计完后可以导出创建所有表的SQL脚本,直接执行 ...