Vue中涉及到的三目運算與v-if結合


一.問題1

1.需求:最近在用Vue寫后台,其中有個需求被廣泛使用:點擊簽收,立即變成     節點辦理|辦結

2.解決辦法:

思路;在   節點辦理|辦結  兩個button按鈕上綁定v-if的三目運算,當點擊簽收,簽收狀態改變,刷新頁面,v-if的條件執行,顯示  節點辦理|辦結

使用的是elementUI的table組件,根據組件的api,點擊簽收按鈕,傳遞當前這行的數據,能夠得到簽收狀態的值,在   節點辦理|辦結  使用v-if進行三木運算的判斷

具體代碼:

 

 3.想法:

我覺得v-if和三目運算在這種變量只有兩個狀態的條件下切換用來特別方便,尤其是做后台,頻繁用到這個功能,v-show也可以使用,但是在這個地方使用起來太麻煩,而且v-show只是隱藏css樣式,不重新加載,所以還涉及變量清空的問題

二.問題2

1.需求:主要是使用v-if在elementUI的form表單中關聯某些表單項

分割線

 

 

 選參數配置,顯示表單項  父級   ,選目錄時隱藏父級

2.想法:radio這種只有兩個選項的時候,使用v-if,而且不涉及在Vue中的data中處理,我猜想的是v-model中的雙向綁定值,還跟問題1不一樣,畢竟問題1要去走個接口,去改變狀態,而在form表單中,只需要選參數配置就顯示父級,非常方便

 

三.問題3

1.需求:由按鈕來控制表單的狀態,即是否可編輯,不可編輯就是禁用狀態,初始狀態是被禁用轉態

初始

 

點擊編輯按鈕后,切換成可編輯狀態

 

 2.思路:同樣使用三目運算,在網上看了別人的想法,再改了下,可以這樣做

elementUI中的disabled綁定一個變量,且變量賦值,利用三木運算判斷,:disabled="(dialogType)=='edit'?true:false"   需要注意的是變量加括號,值如果是字符串加引號

 

這樣賦值之后,在編輯事件中,只需要改變dialogType的值,隨便賦值即可,只要不跟初始化的值一樣就可以,還需要注意的是在data中也要賦初始值,

 

 

 參考鏈接:https://blog.csdn.net/hongc93/article/details/105587375

這是最近做后台遇到三目運算跟v-if的問題,做總結,以后遇到了會持續更新

 9.10更新

 四.問題4

三目運算加兩個條件

 

 轉載於:https://blog.csdn.net/u014131617/article/details/86641206

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM