vue的v-if裡實現調用函數

Posted on by

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> 

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：