欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue 不使用select實現下拉框功能(推薦)

 更新時間:2018年05月17日 11:48:56   作者:github_39598787  
這篇文章主要介紹了vue 不使用select實現下拉框功能,在文章給大家提到了vue select 組件的使用與禁用,需要的朋友可以參考下

html部分:v-for循環(huán)出的結構

<div >
  <p @click="clickSize (item, index)">{{item.name}}</p> 
  <transition name="opacityLeave">
   <div class="condition-list" v-show="isShowSize && index == i">
    <div class="size-wrap" v-if="item.RingSize">
     <p class="size" :class="{'active':item1.active}" :key="index1" v-for="(item1, index1) in item.RingSize" @click="getSize (item, item1) ">{{item1.AttrValueName}}</p>
    </div>
   </div>
  </transition>
</div>

js部分:

data() {
 return {
  isShowSize: false,
  i: -1
 };
 },
//實現點擊哪個下拉框顯示
  clickSize (item, index) {
  this.i = index;
  this.isShowSize = !this.isShowSize;
 },
//實現選取下拉值
 getSize (item, item1) {
  this.item.name = item1.AttrValueName;
  this.isShowSize = !this.isShowSize;
 },

下面看下vue--select組件的使用與禁用

業(yè)務:消息推送方式有兩種,為“微信”和“郵件”,微信發(fā)送時需要選擇“要發(fā)送的應用程序”,郵件發(fā)送時不需要

微信發(fā)送時,頁面如下:

頁面

郵件發(fā)送時,選擇器不可用,頁面如下:

郵件頁面

雖然官網上沒有給出具體的例子,但可從屬性中查到 “disabled”屬性,

屬性 說明 類型 默認值
disabled 是否禁用 Boolean false

實現:

  添加disabled屬性,寫成如下紅色標記格式;定義一個isAble變量,用來存放TRUE和FALSE值,決定此選擇框是否可用。

<Select <span style="color: rgb(255, 0, 0);">v-bind:disabled="isAble" </span>clearable v-model="dataAgentEntity.ID" style="width:240px"> 
  <Option v-for="item in dataAgent" :value="item.ID" :key="item.ID">{{ item.name }}</Option> 
 </Select> 

export default { 
 data(){ 
  return{ 
   isAble: false,//select下拉框是否可用 
  } 
 } 

然后就是邏輯中操作變量isAble的值,改變組件的可用禁用狀態(tài)了

 methods:{ 
   Test(){ 
   var vm = this; 
    if (vm.alertType == '郵件') { 
    vm.isAble = true; //不可用 
   } 
    
   } 
} 

test方法中只寫了判斷不可用,改回微信時,還要變成可用狀態(tài),不然又埋了個bug,哈哈。不過這是業(yè)務邏輯了,只介紹方法,記個筆記,具體視情況而定。

以上所述是小編給大家介紹的vue 不使用select實現下拉框功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

相關文章

  • vue+elementUI組件table實現前端分頁功能

    vue+elementUI組件table實現前端分頁功能

    這篇文章主要為大家詳細介紹了vue+elementUI組件table實現前端分頁功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-12-12
  • 詳解使用element-ui table組件的篩選功能的一個小坑

    詳解使用element-ui table組件的篩選功能的一個小坑

    在element ui 框架中,對于table框架,有一個篩選功能,這篇文章主要介紹了詳解使用element-ui table組件的篩選功能的一個小坑,非常具有實用價值,需要的朋友可以參考下
    2018-11-11
  • Vue結合SignalR實現前后端實時消息同步

    Vue結合SignalR實現前后端實時消息同步

    這篇文章主要為大家詳細介紹了Vue結合SignalR實現前后端實時消息同步,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-09-09
  • vue 解決mintui彈窗彈起來,底部頁面滾動bug問題

    vue 解決mintui彈窗彈起來,底部頁面滾動bug問題

    這篇文章主要介紹了vue 解決mintui彈窗彈起來,底部頁面滾動bug問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue 中引用gojs繪制E-R圖的方法示例

    vue 中引用gojs繪制E-R圖的方法示例

    這篇文章主要介紹了vue 中引用gojs繪制E-R圖的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • 實現一個Vue版Upload組件

    實現一個Vue版Upload組件

    這篇文章主要介紹了實現一個Vue版Upload組件,文章圍繞主題展開詳細的內容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-08-08
  • 如何構建 vue-ssr 項目的方法步驟

    如何構建 vue-ssr 項目的方法步驟

    這篇文章主要介紹了如何構建 vue-ssr 項目的方法步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-08-08
  • Vue.js axios響應攔截如何獲取返回狀態(tài)碼

    Vue.js axios響應攔截如何獲取返回狀態(tài)碼

    這篇文章主要介紹了Vue.js axios響應攔截如何獲取返回狀態(tài)碼問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue3過渡動畫的詳解

    vue3過渡動畫的詳解

    這篇文章主要為大家詳細介紹了vue3過渡動畫,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • Vue2 的12種組件通訊

    Vue2 的12種組件通訊

    之前文章我們描述給過Vue3 的七通信使用,今天中五篇文章我們再來看看Vue2 的通信使用寫法的相關資料,需要的朋友可以參考下面文章的具體內容
    2021-09-09

最新評論