小程序制作平台_详解vuejs2.0 select 动态绑定下拉框

摘要: 详细说明vuejs2.0 select 动态性关联往下拉框适用选取 本文关键详细介绍了vuejs2.0 select动态性关联往下拉框 ,原文中根据实例编码详细介绍的十分详尽,对大伙儿的学习培训或是工作...

详解vuejs2.0 select 动态绑定下拉框支持多选       这篇文章主要介绍了vuejs2.0 select动态绑定下拉框 ,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

select 下拉选择

产品类型:这一项是select 涉及到父子组件信息传递 下面拆开讲解

父组件

 div 
 div 
 产品类型:
 /div 
 div 
 v-selection :selections="buyTypes" @on-change="onParamChange('buyType', $event)" /v-selection 
 /div 
 /div 

:selections=”buyTypes” 传入子组件 在子组件 接收这个参数

@on-change=”onParamChange(‘buyType', $event)” 通过这个事件 接收 子组件传入 的参数

子组件

 template 
 div 
 div @click="toggleDrop" 
 span {{ selections[nowIndex].label }} /span 
 div /div 
 /div 
 div v-if="isDrop" 
 li v-for="(item, index) in selections" @click="chooseSelection(index)" {{ item.label }} /li 
 /ul 
 /div 
 /div 
 /template 
 script 
export default {
 pro凡科抠图: {
 selections: {
 type: Array,
 default: [{
 label: 'test',
 value: 0
 data () {
 return {
 isDrop: false,
 nowIndex: 0
 methods: {
 toggleDrop () {
 this.isDrop = !this.isDrop
 chooseSelection (index) {
 this.nowIndex = index
 this.isDrop = false
 this.$emit('on-change', this.selections[this.nowIndex])
 /script 

:selections="versionList" @on-change="onParamChange('versions', $event)" /v-mul-chooser /div /div

子组件

 template 
 div 
 v-for="(item, index) in selections"
 @click="toggleSelection(index)"
 :title="item.label"
 : {{ item.label }} /li 
 /ul 
 /div 
 /div 
 /template 
 script 
import _ from 'lodash'
export default {
 pro凡科抠图: {
 selections: {
 type: Array,
 default: [{
 label: 'test',
 value: 0
 data () {
 return {
 nowIndexes: [0]
 methods: {
 toggleSelection (index) {
 if (this.nowIndexes.indexOf(index) === -1) {
 this.nowIndexes.push(index) 
 else {
 this.nowIndexes = _.remove(this.nowIndexes, (idx) = {
 return idx !== index
 let nowObjArray = _.map(this.nowIndexes, (idx) = {
 return this.selections[idx]
 this.$emit('on-change', nowObjArray)
 checkActive (index) {
 return this.nowIndexes.indexOf(index) !== -1
 /script 

这里用到 lodash 因为vuejs2.0 放弃了$.remove 方法 可以通过lodash 方法解决

以上所述是小编给大家介绍的vuejs2.0 select动态绑定下拉框详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:html网页模板