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值，这样对应的值就可以被选中。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
组合式API为Vue3带来了更好的逻辑组织和复用性,支持TypeScript,提供灵活的响应式系统,它允许开发者将相关逻辑组合在一起,通过composable函数实现逻辑复用,摆脱了mixin的缺点,同时,组合式API与TypeScript的集成更紧密,能够提供更准确的类型推断2024-10-10
这篇文章主要为大家介绍了vue测试开发watch监听data的数据变化，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-05-05
跳转到指定URL,向history栈添加一个新的纪录,点击后退会返回至上一个页面,这篇文章给大家介绍vue如何跳转到其他页面,包括无参跳转和带参跳转,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-10-10
vue3 Element-Plus el-backtop无效问题及解决
这篇文章主要介绍了vue3 Element-Plus el-backtop无效问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue3 中一个组件从创建到挂在,会经过3个重点步骤：创建组件实例,设置组件实例,创建并执行带副作用的渲染函数,本文将着重讲清 创建组件实例、设置组件实例 这两个过程都做了什么,这部分逻辑很简单,但你会从中学习到 Vue 优秀的实践技巧,需要的朋友可以参考下2024-07-07
vite+vue3项目启动报错Unexpected “%“问题及解决
这篇文章主要介绍了vite+vue3项目启动报错Unexpected “%“问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本文主要介绍了Vue实现自定义右击删除菜单的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了Vue2和Vue3的10种组件通信方式梳理，本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式，需要的朋友可以参考一下2022-08-08
本篇文章主要介绍了使用vue制作FullPage页面滚动效果，详细的介绍了FullPage页面的思路和实现，有兴趣的可以了解一下2017-08-08
第一次用Vue+MySQL实现注册登录功能,就已经踩了很多坑,下面这篇文章主要给大家介绍了关于使用Vue+MySQL实现登录注册案例的相关资料,需要的朋友可以参考下2022-05-05
最新评论