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

今天小編給大家分享一下vue的v-if里怎么實(shí)現(xiàn)調(diào)用函數(shù)的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

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 為同一類(lèi)型組件

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

<template v-if="type=== 'username'">  
  <label>用戶(hù)名</label>  
  <input placeholder="輸入用戶(hù)名">  
</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>用戶(hù)名</label>  
  <input placeholder="輸入用戶(hù)名">  
</template>  
<template v-else  key="2">  
  <label>郵箱</label>  
  <input placeholder="輸入郵箱">  
</template>

以上就是“vue的v-if里怎么實(shí)現(xiàn)調(diào)用函數(shù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。