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 相关文章推荐
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
JS实现音量控制拖动
Jan 15 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
浅谈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
文章推荐系统(三)
2006/10/09 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
Yii2如何批量添加数据
2016/05/17 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
python数据结构之图的实现方法
2015/07/08 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
python实现一组典型数据格式转换
2018/12/15 Python
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
北京振戎融通Java面试题
2015/09/03 面试题
英文版银行求职信
2013/10/09 职场文书
服装创业计划书范文
2014/02/05 职场文书
小学语文业务学习材料
2014/06/02 职场文书
社区志愿者培训方案
2014/06/10 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书