挑选下拉选择

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

父组件

' div class='销售板-线' div class='销售板-线-左'产品类型：/div div class=' sales-board-line-right ' v-selection : selection=' buy type ' @ on-change=' onParamChange(' buy type '，$ event)'/v-selection/div脚本从导入VSelection '././components/base/selection ' import _ from ' lodash ' export default { components 3360 { VSelection，VCounter，VChooser，VMulChooser，MyDialog: Dialog，BankChooser，CheckOrder }，data(){ return { buy num 3360 0 0 0，buy type : }，版本：[]，周期： }，价格：版本列表33:[{ label 3: '客户版，value: 0 }，{ label: '代理商版，value: 1 }，{ label: '专家版，值： { 2 }]，周期列表： [ { label: '半年，value: 0 }，{ label: '一年，value: 1 }，{ label: '三年，值： { 2 }]，buyTypes: [ { label: '入门版，value: 0 }，{ label: '中级版，value: 1 }，{ label: '高级版，值： { 2 }]，isShowPayDialog: false，bankId: null，orderId: null，isShowCheckOrder: false，isShowErrDialog: false } }，方法： { OnParameChange(attr，val){ this[attr]=val//。getPrice()控制台。log(this[attr]，attr) }，getPrice(){ let buy version array=_ .map(this.versions，(item)={ return item.value })让req params={购买号码： this。buy num，buy type : thi . buy type . value，period : thi . period . value，version : buy version数组。加入('，')}这个.$http.post('/api/getPrice '，reqParams).然后((RES)={ this。价格=RES .数据。金额})}，onChangeBanks(bank obj){ this。银行id=bank obj。id }，确认buy(){ let buyversionarray=_ .map(this.versions，(item)={ return item.value })让req params={购买号码： this。buy num，buy type : thi . buy type . value，period : thi . period . value，version : buy version数组。加入('，')，bankId: this.bankId } this .$http.post('/api/createOrder '，reqParams).然后((RES)={ this。orderid=RES . data。订购这个。isshow checkorder=true this。isshow paydialog=false }，(err)={ this。isshow buy dialog=false this。isshow rrdialog=true })})，挂载(){这个。买num=1这个。购买类型=这个。购买类型[0]这个。版本=[这个。版本列表[0]]此。周期=这个。期间列表[0]}/script 3360 selections=“购买类型”传入子组件在子组件接收这个参数

@ on-change=" OnParameChange(' BuyType '，$event)"通过这个事件接收子组件传入的参数

子组件

模板div class=' selection-component ' div class=' selection-show ' @ click=' toggleadrop ' span { { selections[now index]} .label } }/span div class=' arrow '/div/div class=' selection-list ' v-if=' Isdrop ' ul Li v-for='(item，index)在selections ' @ click=' choose selection(index)' { { item。label } }/Li/ul/div/div/template script导出默认值{ prop : { selection : { type 3: Array，默认值3:[{ label 3: ' test，value 3: }]]this.isDrop }，选择selection(index){ this。现在索引=索引这个。Isdrop=false this .$emit('on-change '，这。选择[这。now index]))} }/脚本样式作用域。selection-component {位置：相对；显示器：内联块；}.精选-展示{边框： 1px实心# E3 E3 E3；padd : 0 20px 0 10pxdisplay :内联块；相对位置：光标：指针；高度： 25px线高： 25px边界半径： 3px背景# fff}。精选节目箭头{ display : inline-block；边框-左侧： 4px实心透明；右边框： 4px实心透明；边框-top: 5px实心# e3e3e3宽度： 0;高度： 0;页边距-顶部：-1px；左边距左侧： 6px右边距：-14px；垂直对齐： 中间；}.选择列表{ display : inline-block；绝对位置：左： 0；top: 25px宽度： 100%;背景# fffborder-top: 1px实心# e3e3e3border-bottom: 1px实心# e3e 3e 3z-索引： 5；}.选择列表li { padding: 5px 15px 5px 10px边框-左侧： 1px实心# e3e3e3右边框： 1px实心# e3e3e3cursor:指针；背景# fff white-space : nowrap；飞越：隐藏；文本-飞越：省略号；}.选择列表李：悬停{背景： # E3 E3 e 3；}/styleselect多选

产品版本：这一项是挑选涉及到父子组件信息传递下面拆开讲解

父组件

' div class='销售板-线' div class='销售板-线-左'产品版本：/div class=' sales-board-line-right ' v-mul-chooser : selections=' version list ' @ on-change=' onParamChange(' versions '，$event)'/v-mul-chooser /div /div子组件

template div class=' chooser-component ' ul class=' chooser-list ' Li v-for='(item，index)in selections ' @ click=' toggle selection(index)' : title=' item。label ' : class=' { active : check active(index)} ' { { item。label } }/Li/ul/div/div/template script import _ from ' lodash ' export default { props : { selection : { type 3: Array，remove(this.nowIndexes，(idx)={ return idx！==索引}) }让nowObjArray=_ .map(this.nowIndexes，(idx)={ return this。选择[idx]})这一点.$emit('on-change '，nowObjArray) }，检查active(index){返回此。现在索引。indexof(索引)！==-1 } } }/脚本样式范围。chooser-component {相对位置：显示器：内联块；}.选择器列表Li {显示：内嵌块；border: 1px固体# e3e 3；高度： 25px线高： 25pxpadding: 0 8px右边距： 5px边界半径： 3px文本对齐：中心；光标：指针；}.李。活动{边框颜色： # 4fc 08d背景# 4fc08dcolor: # fff}/样式这里用到洛达什因为vuejs2.0放弃了$.移动方法可以通过洛达什方法解决

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