基于vue v-for 循环复选框-默认勾选第一个的实现方法


Posted in Javascript onMarch 03, 2018

应用场景:在进行多选的时候一般默认显示第一个。

实现方法:纯vue实现

例子:

<span v-for="(one,index) in site"><input type="checkbox" :checked="index == 0" style="vertical-align: middle;"><label>{{one.name}}</label></span>

//:checked="index == 0"为索引为0的,即为第一个复选框添加属性。

拓展:默认被选中的复选框,只需要index指定即可。

以上这篇基于vue v-for 循环复选框-默认勾选第一个的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
Javascript代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
小程序自定义圆形进度条
Nov 17 Javascript
JS表单传值和URL编码转换
Mar 03 #Javascript
jQuery实现左右滑动的toggle方法
Mar 03 #jQuery
vue中实现移动端的scroll滚动方法
Mar 03 #Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 #Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 #Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 #Javascript
js操作二进制数据方法
Mar 03 #Javascript
You might like
PHPThumb图片处理实例
2014/05/03 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
js常见表单应用技巧
2008/01/09 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
jQuery参数列表集合
2011/04/06 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
js实现简单的验证码
2015/12/25 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python中list常用操作实例详解
2015/06/03 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
Python 实现一个简单的web服务器
2021/01/03 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
老师对学生的评语
2014/04/18 职场文书
食堂厨师岗位职责
2014/08/25 职场文书