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 相关文章推荐
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
详解puppeteer使用代理
Dec 27 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 Javascript
浅谈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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
快速开发一个PHP扩展图文教程
2008/12/12 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
深入PHP变量存储的详解
2013/06/13 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
js对象的复制继承实例
2015/01/10 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
华润集团网上药店:健一网
2016/09/19 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
文员试用期转正自我鉴定
2014/09/14 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
检讨书范文500字
2015/01/28 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
Python 中random 库的详细使用
2021/06/03 Python
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
公历12个月名称的由来
2022/04/12 杂记
python垃圾回收机制原理分析
2022/04/13 Python