vue 实现特定条件下绑定事件
作者:灰姑娘的冰眸 时间:2023-07-02 16:39:42
今天写了个小功能,看起来挺简单,写的过程中发现了些坑。
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('能提交');
}
}
}
}
来源:https://www.cnblogs.com/renzm0318/p/9723521.html
标签:vue,绑定事件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python爬取淘宝商品销量信息
2023-06-01 14:59:03
交互设计实用指南系列(6) –标签明晰、有效
2010-01-21 12:39:00
![](https://img.aspxhome.com/file/UploadPic/20101/21/32-66s.jpg)
详解Python的单元测试
2021-11-22 14:53:57
Python学习之pip包管理工具的使用
2023-07-24 11:01:57
![](https://img.aspxhome.com/file/2023/9/97229_0s.png)
Pycharm 2020年最新激活码(亲测有效)
2023-07-24 00:42:14
![](https://img.aspxhome.com/file/2023/6/59136_0s.png)
thinkphp实现图片上传功能分享
2024-05-22 10:06:36
JS循环中正确使用async、await的姿势分享
2024-05-25 15:18:56
![](https://img.aspxhome.com/file/2023/2/123712_0s.gif)
一次python-flask蓝图的踩坑记录
2021-11-04 13:32:35
一文教会你用Python读取PDF文件
2021-03-23 00:24:55
![](https://img.aspxhome.com/file/2023/6/102896_0s.png)
JS实现获取毫秒值及转换成年月日时分秒的方法
2024-04-18 09:42:54
![](https://img.aspxhome.com/file/2023/0/136290_0s.png)
推荐8款常用的Python GUI图形界面开发框架
2023-04-09 04:02:41
![](https://img.aspxhome.com/file/2023/1/100751_0s.jpg)
关于vue-i18n在单文件js中的使用
2024-05-09 09:38:48
Python字节码与程序执行过程详解
2022-01-25 04:45:24
![](https://img.aspxhome.com/file/2023/0/64600_0s.png)
Python自动化运维和部署项目工具Fabric使用实例
2022-06-24 12:46:58
MySQL大量脏数据如何只保留最新的一条(最新推荐)
2024-01-25 22:41:04
![](https://img.aspxhome.com/file/2023/8/88498_0s.jpg)
SQLSERVER 2005中使用sql语句对xml文件和其数据的进行操作(很全面)
2024-01-14 19:31:21
最新anaconda安装配置教程
2021-07-17 05:05:34
![](https://img.aspxhome.com/file/2023/9/82929_0s.jpg)
python去除文件中空格、Tab及回车的方法
2021-12-04 22:25:44
使用sklearn的cross_val_score进行交叉验证实例
2023-11-25 15:49:33
![](https://img.aspxhome.com/file/2023/0/93630_0s.jpg)
go语言算法题解二叉树的拷贝、镜像和对称
2024-04-28 10:45:18
![](https://img.aspxhome.com/file/2023/0/134140_0s.jpg)