如何在vue中實(shí)現(xiàn)下拉框功能?很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比霍爾果斯網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式霍爾果斯網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋霍爾果斯地區(qū)。費(fèi)用合理售后完善,10年實(shí)體公司更值得信賴。
html部分:v-for循環(huán)出的結(jié)構(gòu)
{{item.name}}
{{item1.AttrValueName}}
js部分:
data() { return { isShowSize: false, i: -1 }; }, //實(shí)現(xiàn)點(diǎn)擊哪個(gè)下拉框顯示 clickSize (item, index) { this.i = index; this.isShowSize = !this.isShowSize; }, //實(shí)現(xiàn)選取下拉值 getSize (item, item1) { this.item.name = item1.AttrValueName; this.isShowSize = !this.isShowSize; },
下面看下vue--select組件的使用與禁用
業(yè)務(wù):消息推送方式有兩種,為“微信”和“郵件”,微信發(fā)送時(shí)需要選擇“要發(fā)送的應(yīng)用程序”,郵件發(fā)送時(shí)不需要
微信發(fā)送時(shí),頁(yè)面如下:
郵件發(fā)送時(shí),選擇器不可用,頁(yè)面如下:
雖然官網(wǎng)上沒有給出具體的例子,但可從屬性中查到 “disabled”屬性,
屬性 | 說明 | 類型 | 默認(rèn)值 |
---|---|---|---|
disabled | 是否禁用 | Boolean | false |
實(shí)現(xiàn):
添加disabled屬性,寫成如下紅色標(biāo)記格式;定義一個(gè)isAble變量,用來存放TRUE和FALSE值,決定此選擇框是否可用。
export default { data(){ return{ isAble: false,//select下拉框是否可用 } }
然后就是邏輯中操作變量isAble的值,改變組件的可用禁用狀態(tài)了
methods:{ Test(){ var vm = this; if (vm.alertType == '郵件') { vm.isAble = true; //不可用 } } }
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù),Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件,每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網(wǎng)頁(yè)中相應(yīng)的地方,所以越來越多的前端開發(fā)者使用vue。
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對(duì)創(chuàng)新互聯(lián)的支持。