vue 实现特定条件下绑定事件


Posted in Javascript onNovember 09, 2019

今天写了个小功能,看起来挺简单,写的过程中发现了些坑。

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" rel="external nofollow" @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 实现特定条件下绑定事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
微信小程序实现下拉框功能
Jul 16 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 #Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 #Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 #Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 #Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 #Javascript
解决vue组件中click事件失效的问题
Nov 09 #Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 #Javascript
You might like
解析PHP提交后跳转
2013/06/23 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
javascript面向对象之对象的深入理解
2015/01/13 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
python中根据字符串调用函数的实现方法
2016/06/12 Python
利用python发送和接收邮件
2016/09/27 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
Python 多维List创建的问题小结
2019/01/18 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
python 串行执行和并行执行实例
2020/04/30 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
车工岗位职责
2013/11/26 职场文书
员工给公司的建议书
2019/06/24 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
详解Vue的sync修饰符
2021/05/15 Vue.js
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
MySQL的存储过程和相关函数
2022/04/26 MySQL