vue判斷載入不同模板時自定義元素是否復用

2021-10-02 18:12:15 字數 1020 閱讀 5890

有時,使用vue在渲染元素時,會根據不同的條件判斷載入不同的template模板內容,經常會盡可能地復用已有的元素而非全部重新寫,比如:

>

"type === 'name'"

>

使用者名稱:<

/label>

"輸入使用者名稱"

>

<

/template>

else

>

/label>

"輸入郵箱"

>

<

/template>

"handletoggleclick"

>切換輸入型別<

/button>

<

/div>

newvue(,

methods:}}

)<

/script>

輸入內容後,dom改變了,但是輸入框裡的內容依然保留著,說明輸入框被復用了。

如果不希望是這個效果,可以使用vue的key屬性,它可以自定義讓我們決定是否要復用元素,key的值必須唯一。

修改後的**如下:

>

"type === 'name'"

>

使用者名稱:<

/label>

"輸入使用者名稱" key=

"name-input"

>

<

/template>

else

>

/label>

"輸入郵箱" key=

"mail-input"

>

<

/template>

"handletoggleclick"

>切換輸入型別<

/button>

<

/div>

newvue(,

methods:}}

)<

/script>加完key屬性後,就不會復用了,切換型別時輸入的內容也會被刪除。

discuz 自定義不同欄目不同模板

alter table pre forum forum add ffile char 40 not null after styleid add vfile char 40 not null after ffile 2.新增後台表單 開啟source admincp admincp forums.p...

Vue滾動載入自定義指令

用vue在移動端做滾動載入,使用mint ui框架,infinitescroll指令loadmore元件,在uc瀏覽器和qq瀏覽器都無法觸發。無奈我只能自己寫了。決定用vue 的自定義指令 寫滾動載入。核心的api 思路給window繫結滾動事件,用 if 滾動條高度 瀏覽器視窗高度 內容高度 閾值...

載入vue檔案步驟 vue載入自定義的js檔案方法

在做專案中需要自定義彈出框。就自己寫了乙個。效果圖遇見的問題 怎麼載入自定義的js檔案 vue 外掛程式這必須要看。然後就是自己寫了。export default install vue var tpl 彈出框 vue.prototype.showalter title,msg var altert...