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 鼠标拖动图标技术
Feb 07 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
JS判断数组那点事
Oct 10 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
node读写Excel操作实例分析
Nov 06 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+mysql)
2007/11/23 PHP
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
php生成短域名函数
2015/03/23 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
JS获取农历日期具体实例
2013/11/14 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
JS Math对象与Math方法实例小结
2019/07/05 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
python爬取m3u8连接的视频
2018/02/28 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
Django 返回json数据的实现示例
2020/03/05 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
地道战观后感400字
2015/06/04 职场文书
环保证明
2015/06/23 职场文书
正规欠条模板
2015/07/03 职场文书
食堂卫生管理制度
2015/08/04 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
解析Redis Cluster原理
2021/06/21 Redis
Python中如何处理常见报错
2022/01/18 Python