vue的v-if里實(shí)現(xiàn)調(diào)用函數(shù)

更新時(shí)間：2022年07月02日 15:11:44 作者：kxukai

這篇文章主要介紹了vue的v-if里實(shí)現(xiàn)調(diào)用函數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue v-if調(diào)用函數(shù)

<div v-if="test()"></div>

methods屬性這樣配置

methods: {
    test: function() {
        var result = false;
        // ...
        return result;
    }
}

使用v-if時(shí)的注意點(diǎn)

1.v-if和v-else或v-else-if之間不能添加其他元素

以下是錯(cuò)誤事例

<span v-if="type==1">錯(cuò)誤示范</span>
<span>哈哈哈</span>
<p v-else>嘿嘿嘿</p>

以下是正確實(shí)例

<span v-if="type==1">正確示范</span>
<p v-else>嘿嘿嘿</p>
<span>哈哈哈</span>

2.v-if 為同一類型組件

(或同一模板的dom樹(shù))來(lái)做顯示和隱藏時(shí)，最好在最外層添加key屬性來(lái)設(shè)定唯一標(biāo)識(shí)，否則容易出問(wèn)題

<template v-if="type=== 'username'"> ?
? <label>用戶名</label> ?
? <input placeholder="輸入用戶名"> ?
</template> ?
<template v-else> ?
? <label>郵箱</label> ?
? <input placeholder="輸入郵箱"> ?
</template> ?

以上代碼切換時(shí)，僅僅切換placeholder，而不會(huì)重新渲染，因?yàn)樗昧讼嗤哪０?/p>

若v-if切換的是邏輯復(fù)雜的控件時(shí)，切換時(shí)不重新渲染極易出問(wèn)題

需要給要重新渲染的控件添加一個(gè)key屬性，來(lái)唯一標(biāo)識(shí)該控件，被key標(biāo)識(shí)后會(huì)重新渲染。

實(shí)例如下：

<template v-if="type=== 'username'" key="1"> ?
? <label>用戶名</label> ?
? <input placeholder="輸入用戶名"> ?
</template> ?
<template v-else ?key="2"> ?
? <label>郵箱</label> ?
? <input placeholder="輸入郵箱"> ?
</template>?

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue使用WEB自帶TTS實(shí)現(xiàn)語(yǔ)音文字互轉(zhuǎn)的操作方法
這篇文章主要介紹了vue使用WEB自帶TTS實(shí)現(xiàn)語(yǔ)音文字互轉(zhuǎn),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-01-01
Vue2.0使用過(guò)程常見(jiàn)的一些問(wèn)題總結(jié)學(xué)習(xí)
本篇文章主要介紹了Vue2.0使用過(guò)程常見(jiàn)的一些問(wèn)題總結(jié)學(xué)習(xí)，詳細(xì)的介紹了使用中會(huì)遇到的各種錯(cuò)誤，有興趣的可以了解一下。
2017-04-04
vue 1.x 交互實(shí)現(xiàn)仿百度下拉列表示例
本篇文章主要介紹了vue 1.x 交互實(shí)現(xiàn)仿百度下拉列表示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
vue實(shí)現(xiàn)簡(jiǎn)單的星級(jí)評(píng)分組件源碼
這篇文章主要介紹了vue星級(jí)評(píng)分組件源碼,代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-11-11
Vue使用fabric.js實(shí)現(xiàn)局部截圖與大圖預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了Vue如何使用fabric.js實(shí)現(xiàn)局部截圖與el-image-viewer大圖預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的可以了解下
2024-02-02
關(guān)于vue設(shè)置環(huán)境變量全流程
這篇文章主要介紹了關(guān)于vue設(shè)置環(huán)境變量全流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue中data數(shù)據(jù)之間如何賦值問(wèn)題
這篇文章主要介紹了vue中data數(shù)據(jù)之間如何賦值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。
2022-09-09
Vue中使用及封裝websocket示例詳解
這篇文章主要為大家介紹了Vue中使用及封裝websocket示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
antd vue v-decorator的取值與賦值問(wèn)題
這篇文章主要介紹了antd vue v-decorator的取值與賦值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
詳解.vue文件中style標(biāo)簽的幾個(gè)標(biāo)識(shí)符
這篇文章主要介紹了詳解.vue文件中style標(biāo)簽的幾個(gè)標(biāo)識(shí)符，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07