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技术-屏蔽类
Aug 15 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 Javascript
聊聊vue 中的v-on参数问题
Jan 29 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
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
php获取淘宝分类id示例
2014/01/16 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
python处理图片之PIL模块简单使用方法
2015/05/11 Python
深入理解python中的select模块
2017/04/23 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
医学毕业生自我鉴定
2013/10/30 职场文书
关于爱国的标语
2014/06/24 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
欢迎词怎么写
2015/01/23 职场文书
公司车队管理制度
2015/08/04 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL