vue 特定条件下绑定事件
今天写了个小功能,看起来挺简单,写的过程中发现了些坑。
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 特定条件下绑定事件的更多相关文章
- Vue框架之双向绑定事件
Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...
- vue form表单绑定事件与方法
使用v-on绑定事件 <button @click="hello">Hello</button><br /> <button @click ...
- Vue根据条件添加 click 事件
方式一:在绑定事件中直接添加标示量clickFlag <div @click="clickFlag && addGoodsHandler()"> XXX ...
- vue系列--vue是如何实现绑定事件
一.前言 vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法. 二.事件绑定方式 ...
- spring4.0之五:@Conditional在满足特定条件下,才会实例化对象
这篇文章介绍Spring 4的@Conditional注解. 一.在Spring的早期版本你可以通过以下方法来处理条件问题 3.1之前的版本,使用Spring Expression Language( ...
- 特定条件下批量解压文件改变编码,顺便修改.so.0找不到等一些小问题
直接结论: 1.linux解压文件乱码: unzip -O GBK *.zip 2.linux改变文件内容编码: 安装enca,下载地址:https://github.com/nijel/enca/i ...
- Chrome插件Visual Event查看Dom元素绑定事件的利器
找这工具找了好久,统一找着了,开发人员不可多得的好东东,收藏做一下分享. 用Chrome插件Visual Event查看Dom绑定的事件 Visual Event简介 Visual Event是一个开 ...
- jQ给下拉框绑定事件,为什么要绑定在框(select标签)上,而不是绑定在选项(option标签)上
这是我在学习锋利的 jquery 书中 5.1.4 的代码时遇到的一个小问题,源代码如下: <head> <style type="text/css"> * ...
- vue使用svg,animate事件绑定无效问题及解决方法
由于使用svg制作圆形进度条,但是进度展示的太生硬,没有过渡圆滑的效果,所以使用 animate(在svg元素里可以查到) 元素标签,但 这样使用了,还是没有效果,我前端使用的 vue ,所以通过 @ ...
随机推荐
- 三维建模:方法之CSG与B-Rep比较
源自于百度百科:实体造型--- 三维模型特征表示方法: 计算机中表示三维形体的模型,按照几何特点进行分类,大体上可以分为三种:线框模型.表面模型和实体模型.如果按照表示物体的方法进行分类,实体模型基本 ...
- 杭电2060WA
#include<stdio.h> int main() { int n,num,p,q,i,a[]={2,3,4,5,6,7}; scanf("%d",&n) ...
- jquery里面的选择器
jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...
- 【转】Oracle基础结构认知—oracle物理结构 礼记八目 2017-12-13 20:31:06
原文地址:https://www.toutiao.com/i6499008214980362765/ oracle数据库启动:oracle服务启动,通过参数文件查找控制文件,启动控制文件,则控制文件调 ...
- vc++如何创建程序-析构函数01
#include<iostream.h>class Point{public: int x; int y; Point() { x=0; y=0; }//构造函数是用来创建函数本身,那么, ...
- javase 超市库存系统
package com.oracle.demo01; import java.util.ArrayList; import java.util.Scanner; public class Demo01 ...
- SSH启动失败解决方法
今天连接linux时居然连不上,报错信息是: 查了一下终于找到了解决办法,只需要一些命令 : cd /etc/ssh sudo chmod 644 ./* sudo chmod 600 ssh_hos ...
- Android 将Android项目打包成aar文件
参考资料:https://blog.csdn.net/csdn_mm/article/details/78364444
- 【图像处理】使用OpenCV实现人脸和行人检测
OpenCV全称是Open source Computer Vision Library(开放源代码计算机视觉库),是一个用于图像处理.分析.机器视觉方面的开源函数库,提供了很多图像处理的工具和可 ...
- kernel相关前沿技术了解
Intel MPX https://en.wikipedia.org/wiki/Intel_MPX SPDK http://aidaiz.com/spdk/ TCMalloc http://goog- ...