使用v-if還是v-show

使用el-form來做表單驗證時，有時候選擇的條件不同，展示的el-form-item也不一樣，
這時候就需要控制輸入框的展示與隱藏。那么，用v-if還是v-show呢？

• v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。

因此，如果需要頻繁的切換，使用v-show，否則，使用v-if。

表單驗證bug

當(dāng)使用v-if或v-show來控制el-form-item的顯示與隱藏時，會出現(xiàn)校驗失效的bug。

• 使用v-if：element在對form表單中帶有prop屬性的子組件進(jìn)行校驗規(guī)則綁定時，是在vue聲明周期mounted完成的。而v-if用來切換的元素是會被銷毀的，導(dǎo)致了v-if內(nèi)的表單項，由于在mounted時期沒有進(jìn)行渲染，所以規(guī)則也沒有綁定上。
  初始化時不符合顯示條件的不會生成規(guī)則，導(dǎo)致后面切換條件，顯示的輸入框的校驗不會生效
• 使用v-show：初始化時會生成所有的規(guī)則，即使隱藏了也會進(jìn)行規(guī)則校驗

解決辦法：自定義校驗規(guī)則

自定義校驗規(guī)則，先判斷條件，再進(jìn)行校驗。

• 控制輸入框顯示的代碼

<el-form-item label="是否展示" prop="inputValue" v-show="showFlag == 0">
  <el-input v-model ="form.inputValue" placeholder="滿足showFlag為0則顯示"/>
</el-form-item>

• 自定義的校驗規(guī)則

const checkInputValue = (rule, value, callback) => {
   if(this.showFlag == 0){
     if (value === ''|| value === null) {
          return callback(new Error('是否展示不能為空'));
        }
        else {
          callback()
        }
   }else {
     callback()
   }
};