下拉选择 ，选择不同组件

　　

 

<div class="type">

　　　　<input @click="selectTypeShow =!selectTypeShow" :placeholder="请选择类型" :value="selectedType.type">

　　　　<i></i>

　　　　<ul class="wrap" v-if="selectTypeShow">

　　　　　　　　<li @click.stop="selectType(item)" v-for="item in typeArry">{{item.text}}</li>

　　　　</ul>

</div>

 

<component :is="tabView"></component>

 

import bank from "./cny_bank";

import wechatpay from "./cny_wechatpay";

import alipay from "./cny_alipay";

 

data() {

　　return {

　　　　selectTypeShow:false,

　　　　tabView:null,

　　　　selectedType: {

　　　　　　key:null,

　　　　　　type:null

　　　　},

　　}

}

components: {

　　bank,

　　wechatpay,

　　alipay

},

computed: {

var typeArry=[

　　{

　　　　value:"1",

　　　　text:this.$lang.bank

　　},

　　{

　　　　value:"2",

　　　　text:this.$lang.alipay

　　},

　　{

　　　　value:"3",

　　　　text:this.$lang.wechatpay

　　}

]

return typeArry

}

}，

methods: {

　　

selectType(item) {

　　this.selectTypeShow = false;

　　this.selectedType.type = item.text;

　　this.selectedType.key = item.value;

　　if(this.selectedType.key == 1){

　　　　this.tabView = "bank";

　　} else if(this.selectedType.key == 3){

　　　　this.tabView = "wechatpay";

　　} else{

　　　　this.tabView = "alipay";

　　}

}

}

转载于:https://www.cnblogs.com/lingshan168/p/9442548.html