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 相关文章推荐
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
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 flush类输出缓冲剖析
2008/10/19 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
php中socket通信机制实例详解
2015/01/03 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
Smarty变量用法详解
2016/05/11 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
优秀党员主要事迹
2014/01/19 职场文书
大学生个人自荐信
2014/02/24 职场文书
1亿有多大教学反思
2014/05/01 职场文书
综艺节目策划方案
2014/06/13 职场文书
迎七一演讲稿
2014/09/12 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
2016年会开场白台词
2015/06/01 职场文书
七年级语文教学反思
2016/03/03 职场文书
导游词之张家界
2019/10/31 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL