vue表单绑定实现多选框和下拉列表的实例


Posted in Javascript onAugust 12, 2017

在vue的实际开发过程中,我们如何将以选中的值直接渲染到页面中,这次主要说的是多选框和下拉列表的实现:

<label>测试多选渲染:</label>
<div>
 <template v-for="item in chks">
  <input type="checkbox" name="hobby" :value="item.id" 
   :checked="loopsss.indexOf(item.id) > -1"/>{{item.name}}
 </template>
</div>
<label>下拉列表测试:</label>
<div>
 <select multiple style="width: 100px;">
  <template v-for="item in chks">
   <option type="checkbox" name="hobby" :value="item.id"  
       :selected="loopsss.indexOf(item.id) > -1">{{item.name}}
   </option>
  </template>
 </select>
</div>

<script>
 export default {
  data () {
   return {
    chks: [
     {id:1,name:"吃饭"},
     {id:2,name:"睡觉"},
     {id:3,name:"打豆豆"},
     {id:4,name:"唱歌"},
     {id:5,name:"学习"}
    ],
    loopsss:''
   }
  },
  mounted: function () {
   this.init()
  },
  methods: {
   init: function () {
    var arr = [1,2,4]//假设这是被选中的爱好
    this.loopsss = arr
   }
  }
 }
</script>

上述实现方式主要是借助indexOf方法去检索id在值在数组中是否可以找到,如果找到,则给checked和selected属性设置true值,这样对应的值就可以被选中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
浅谈angularJS的$watch失效问题的解决方案
Aug 11 #Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 #Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 #Javascript
详解Node中导入模块require和import的区别
Aug 11 #Javascript
vue实现单选和多选功能
Aug 11 #Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 #Javascript
Angular模板表单校验方法详解
Aug 11 #Javascript
You might like
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
cakephp常见知识点汇总
2017/02/24 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
Python中的高级数据结构详解
2015/03/27 Python
Python 异常处理的实例详解
2017/09/11 Python
Django在win10下的安装并创建工程
2017/11/20 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
ASP.NET Core中的配置详解
2021/02/05 Python
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
书法比赛获奖感言
2014/02/10 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
公积金具结保证书
2015/05/11 职场文书
护士岗位竞聘书
2015/09/15 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL