一.問題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