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 ,所以通过 @ ...
随机推荐
- C# 学习笔记_类
定义:将成员及方法封装到类中,类的实例则称为对象. 结构:属性,类修饰符,class,类名,{类体} 类修饰符:new,public,protected,internal,private,abstra ...
- iphone通讯录的备份与恢复
最近在做iOS系统通讯录备份到服务器,并且可以从服务器中下载备份文件恢复到手机的功能,部分实现细节记录如下. 将iphone系统通讯录生成.vcf文件 ABAddressBookRef address ...
- Javase 简单练习
public class Test10 { public static void main(String[] args) { System.out.println("------------ ...
- C++基础 (9) 第九天 编译器对模板类的二次编译 类模板 自定义数组类
1 昨日回顾 2 编译器对于模板的二次编译 写一个模板函数 然后进行调用 g++ template.cpp -o template // 汇编 g++ -S template.cpp –o templ ...
- GDI 线段绘制示例程序
#include <windows.h> #include <strsafe.h> #include <stack> typedef struct tagLINE ...
- vue 配置页面动态的 title
- 3.2、Ansible单命令测试
0.Ansible的group支持all.通配符(*).IP地址 1.查看Ansible的版本 $ ansbile --version [root@test ~]# ansible --versi ...
- js:Array对象常用方法介绍
前言 在js中,数组作为一个特殊的对象.是我们常用的数据格式.今天就来梳理一下常用的数组方法. 1.基础 几种基础的就简单介绍一下:创建数组 var arr1 = new Array(); //括号可 ...
- Linux 字符设备驱动简单总结(转)
http://my.oschina.net/u/1169027/blog/191538
- 【LeetCode-面试算法经典-Java实现】【120-Triangle(三角形)】
[120-Triangle(三角形)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a triangle, find the minimum path s ...