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 相关文章推荐
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
JS函数基本定义与用法示例
Jan 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获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
详解Python当中的字符串和编码
2015/04/25 Python
Python实现多属性排序的方法
2018/12/05 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
python实现mean-shift聚类算法
2020/06/10 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
上海期货面试题
2014/01/31 面试题
优秀老师事迹材料
2014/02/05 职场文书
金融事务专业求职信
2014/04/25 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书