vue表单绑定实现多选框和下拉列表的实例
更新时间：2017年08月12日 08:31:40 作者：朦dada
本篇文章主要介绍了vue表单绑定实现多选框和下拉列表的实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在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值，这样对应的值就可以被选中。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Element+Vue实现动态表单多个下拉框组件功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章给大家介绍了Vue.js项目部署到服务器的详细步骤，既然是部署到服务器，肯定是需要一个云的。具体思路步骤大家可以参考下本文2017-07-07
vue项目登录成功后退出时清空sessionId和userId的问题
这篇文章主要介绍了vue项目登录成功后退出时清空sessionId和userId的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
在这篇文章中,我们将探讨五个实用的 Vue 技巧,这些技巧可以使你日常使用 Vue 编程更高效、更富有成效,感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
本文主要介绍了Vue.js项目在apache服务器部署问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要为大家介绍了Vue.extend实现组件库message组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue项目开发中setTimeout等定时器的管理问题,需要的朋友可以参考下2018-09-09
vue-element-admin 全局loading加载等待
本文主要介绍了vue-element-admin 全局loading加载等待，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了vue项目运行npm install报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-08-08
el-table中在嵌套一个el-table,这样数据格式就没问题了,主要就是样式,将共同的列放到一列中,通过渲染自定义表头render-header,将表头按照合适的宽度渲染出来,本文给大家分享el-table实现嵌套表格的展示功能,感兴趣的朋友一起看看吧2024-02-02
最新评论