Implement calling functions in v-if of vue

vue v-if calling function

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

The methods attribute is configured like this

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

Notes when using v-if

- No other elements can be added between if and v-else or v-else-if

The following is an error example

<span v-if="type==1">Error demonstration</span>
<span>Hahaha</span>
<p v-else>Hehehe</p>

The following is the correct example

<span v-if="type==1">Correct demonstration</span>
<p v-else>Hehehe</p>
<span>Hahaha</span>

-if is the same type of component

When displaying and hiding (or dom tree of the same template) it is best to add a key attribute to set a unique identifier on the outermost layer, otherwise problems will be easily caused by problems.

<template v-if="type=== 'username'">  
  <label>username</label>  
  <input placeholder="Enter a username">  
</template>  
<template v-else>  
  <label>Mail</label>  
  <input placeholder="Enter email">  
</template>  

When switching the above code, only the placeholder is switched, and not re-rendered, because it uses the same template

If v-if switches to a control with complex logic, it is very easy to cause problems if it does not re-render during switching.

You need to add a key attribute to the control to be rerendered to uniquely identify the control. It will be rerendered after being identified by the key.

Examples are as follows:

<template v-if="type=== 'username'" key="1">  
  <label>username</label>  
  <input placeholder="Enter a username">  
</template>  
<template v-else  key="2">  
  <label>Mail</label>  
  <input placeholder="Enter email">  
</template> 

The above is personal experience. I hope you can give you a reference and I hope you can support me more.