vue .js绑定checkbox并获取、改变选中状态的实例


Posted in Javascript onAugust 24, 2018

如下所示:

1.html

<div class="weui-cells weui-cells_checkbox font14" v-for="item in items">
   <label class="weui-cell weui-check__label">
    <div class="weui-cell__ft width-inherit">
     <input type="checkbox" class="weui-check" v-on:click="CheckItem(item)" v-model="item.state" name="checkbox" />
    </div>
   </label>
  </div>

2.js

var vum = new Vue({
 data:{
  items:[]
 }
 methods:{
  CheckItem:function(item){
   item.state = !item.state;
   console.log(this.items);
  }
 }
})

拓展知识:浅谈vue复选框选中的值的问题

如下所示:

<p>
 <input type="checkbox" id="m_nh3" v-model="mFormData.bd_3" v-bind:true-value="3" v-bind::false-value="checkFalseValue">
 <label for="m_nh4">不含3</label>
</p>
<p>
 <input type="checkbox" id="m_nh4" v-model="mFormData.bd_4" v-bind:true-value="4" v-bind::false-value="checkFalseValue">
 <label for="m_nh4">不含4</label>
</p>
<p>
 <input type="checkbox" id="m_nh5" v-model="mFormData.bd_5" v-bind:true-value="5" v-bind::false-value="checkFalseValue">
 <label for="m_nh4">不含5</label>
</p>
<p>
 <input type="checkbox" id="m_nh7" v-model="mFormData.bd_7" v-bind:true-value="7" v-bind::false-value="checkFalseValue">
 <label for="m_nh7">不含7</label>
</p>

最近遇到vue项目中form表单复选框的问题,拿出来分享下,

因为vue没有直接像jqury中的serialize()那样,直接获取表单数据的方法,

为了简单,使用v-model的方法与data数据中的mFormData对象相互绑定,这样在获取表单数据的时候,直接用this.mFormData就可以获取表单数据,

但是在获取checkbox的值得时候,如果不做处理,选中的时候对象中的值为true,没选中的时候值是false,

可能跟我们需要传入后台的数据不符,当然可以在传参的时候对值进行判断修改,但这无形中增加了很多麻烦,

因此,可以使用v-bind:true-value='x'、v-bind:false-value='x'的方法,直接让复选框选中的时候,对象中的值直接是我们想要的数值,

需要注意的是,经常再设置未选中的时候是个空值,如果直接v-bind:false-value=''这样对象中的值还是false,

可以在data中设置一个值为''的数据。

希望对还不熟悉的同学有所帮助。

以上这篇vue .js绑定checkbox并获取、改变选中状态的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
element-ui表格数据转换的示例代码
Aug 24 #Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 #Javascript
vuejs 动态添加input框的实例讲解
Aug 24 #Javascript
vue.js input框之间赋值方法
Aug 24 #Javascript
react build 后打包发布总结
Aug 24 #Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 #Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 #Javascript
You might like
PHP下MAIL的另一解决方案
2006/10/09 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python实现选择排序
2017/06/04 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
django-csrf使用和禁用方式
2020/03/13 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
民族团结先进个人材料
2014/02/05 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫