vue复选框组件自定义对勾_vue2.0中ckeckbox(复选框)的使用心得，及对click事件和change的理解...
最近在公司项目中使用vue2.0做开发，在使用checkbox时遇到了一些问题，首先我们先了解一下需求。
如上如所示，在上方复选框被点击时，更改下方p标签的文本内容为：复选框已被选中。并将p标签文字颜色改为红色。
面对如此简单的需求我第一个想到的就是通过点击事件判断复选框状态，更改文本及css样式，代码如下：
点我
复选框没有被选中
export default {
data() {
return {
ckeckVal:false
}
},
methods:{
clickMe(){
var that=this;
console.log(that.ckeckVal);
}
}
}
.red{
color: red;
}
我们利用v-model来绑定checkbox的值，可以发现，当我们选中之后效果如下图：
@click的理解
打印的结果为false,但我们明明是选中状态，结果应该为true才对，为什么会这样呐，在vue的官方文档中我找到了下面的一段话：
在上面的描述中，我们可以将我们的代码理解为下面的内容：
可以用v-on指令监听click事件，并在触发时运行console.log(that.ckeckVal);
仔细阅读这句话之后，我们发现一个关键词是：触发时，也就是说上面代码中clickMe的执行时间为点击的那一瞬间，而不是点击之后。而点击的那一瞬间复选框的值也确实是``false，这也就解释了为什么我们得到的结果为false。 明白这一点之后我们将@click换成@change`,点击复选框之后得到如下结果：
@change的理解
结合在官网中对于监听事件的解释，我们对@change的理解为：
可以用v-on指令监听change事件，并在状态改变后运行console.log(that.ckeckVal);
总结
click事件的触发是在点击的那一刻，而change事件是在状态改变之后触发。
最后根据需求完善我们的代码：
点我
复选框没有被选中
export default {
data() {
return {
ckeckVal:false,
ckeckClass:'',
ckeckInfo:'复选框没有被选中'
}
},
methods:{
clickMe(){
var that=this;
if(that.ckeckVal){
that.ckeckInfo='复选框被选中了';
that.ckeckClass='red';
}else{
that.ckeckInfo='复选框没有被选中';
that.ckeckClass='';
}
}
}
}
.red{
color: red;
}
以上仅供学习交流使用，如有错误，欢迎指正，谢谢！
vue复选框组件自定义对勾_vue2.0中ckeckbox(复选框)的使用心得，及对click事件和change的理解...相关推荐
- vue复选框组件自定义对勾_vue+element:树级复选框组件使用
handleCheck(checkedKeys,checkedNodes,halfCheckedKeys,halfCheckedNodes){var len = 0,num = 0;var _alen ...
- vue2.0中ckeckbox(复选框)的使用心得，及对click事件和change的理解
最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜 ...
- vue 对象继承_Vue2.0中组件的继承与扩展是什么
Vue2.0中组件的继承与扩展是什么 发布时间:2020-12-07 14:04:09 来源:亿速云 阅读:100 作者:小新 小编给大家分享一下Vue2.0中组件的继承与扩展是什么,相信大部分人都还 ...
- Bootstrap 警告框组件 + 退出按钮样式 实现一个可退出的警告框
Bootstrap 实现可退出的警告框 通过bootstrap的警告框组件和退出按钮的样式就可以实现一个简单的可退出警告框: 先来看看退出按钮样式的实现: <button type=" ...
- 【Popover 弹出框】在vue中，ElmentUI下Popover 弹出框组件 “ 自定义样式修改不了 ” 的解决方法
通过 /deep/ 深层查找并不能找到相关的元素,查找原因发现此组件的样式是全局样式,如果你style中加了scoped,如<style lang="scss" scoped ...
- 怎么把文本框弄一样大小_在VB中如何让文本框大小与窗体大小一样大
展开全部 1.首先我们打开vb6.0软件进入到标准"工程1"界面,这些32313133353236313431303231363533e78988e69d8331333433626 ...
- 用vue实现模态框组件
基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 < ...
- 如何用vue实现模态框组件
基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 < ...
- vue模态框组件拿不到dom元素
今天在写模态框的组件时,在一个页面引入了模态框组件.但是模态框设置初始是不显示的,然后我在模态框组件里面的mouted里面拿到dom元素,按理来说mouted都已经加载完元素了,但是我不管是通过doc ...
最新文章
- mysql查找执行效率慢的SQL语句
- 修改mysql文件的存储路径
- CF 132E 费用流
- linux变量存储命令,如何将命令存储在shell脚本中的变量中？
- Android 应用开发（39）---GridLayout(网格布局)
- 几步教你用 Python 制作一个 RPA 机器人！
- 瑞星09年第一季度安全报告：8亿网民遭木马攻击
- python股票交易微信提醒_python实现秒杀商品的微信自动提醒功能(代码详解)
- iNeedle系统之国舜项目
- Linux环境下一种比较有用的多线程程序调试技巧
- 如何用STM32驱动诺基亚5110显示屏？
- Vue3 抽离封装axios
- DirectX12 - Triangle Culling and Winding Order（三角形的剔除与绕序）
- 用 Code 改变世界 —— 阿里百川 Hackathon 回顾
- 女人心疼男人的10种方式
- 台式启动修复无法自动修复此计算机怎么办,如果win7启动修复无法自动修复此计算机怎么办...
- BP神经网络实用性操作（四步模板）和主要网络参数介绍
- 计算机图形学-曲线和曲面
- angular4 - 思维导图（xmind）
- kubeadm安装k8s 1.23.5