vue的v-if里怎么實現調用函數

今天小編給大家分享一下vue的v-if里怎么實現調用函數的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

vue v-if調用函數

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

methods屬性這樣配置 

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

使用v-if時的注意點

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

以下是錯誤事例

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

以下是正確實例

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

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

(或同一模板的dom樹)來做顯示和隱藏時，最好在最外層添加key屬性來設定唯一標識，否則容易出問題

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

以上代碼切換時，僅僅切換placeholder，而不會重新渲染，因為他用了相同的模板

若v-if切換的是邏輯復雜的控件時，切換時不重新渲染極易出問題

需要給要重新渲染的控件添加一個key屬性，來唯一標識該控件，被key標識后會重新渲染。

實例如下：

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

以上就是“vue的v-if里怎么實現調用函數”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。