vue :( entry conditions render)

v-if
v-show
V-else

A, v-if: generating element or out of a

 1 <div id="example">
 2     <button v-on:click="ifEvent">点击</button>
 3     <p v-if="greeting">hello</p>
 4 </div>
 5 <script>
 6     var vm = new Vue({
 7         el:'#example',
 8         data:{
 9             greeting:true
10         },
11         methods:{
12             ifEvent(){
13                 this.greeting = !this.greeting;
14             }
15         }
16     });
17 </script>

v-if a boolean expression using switching elements generate deleted, since the node will be created and deleted high performance cost, if required a plurality of elements created and deleted, can be employed <template> element as a package element in a package using v-if the command element does not contain the final result of rendering the packaging element, see example:

1  < div the above mentioned id = "Example" > 
2      < the Button v-ON: the Click = "ifEvent" > Click </ the Button > 
3      < div > 
4          < Template v-IF = "the Greeting" > 
5              < h2 > I was heading < / h2 > 
6              < the p- > I Introduction </ the p- > 
7              < the p- > I am content </ the p- > 
8          </template>
 9     </div>
10 </div>
11 <script>
12     var vm = new Vue({
13         el:'#example',
14         data:{
15             greeting:true
16         },
17         methods:{
18             ifEvent(){
19                 this.greeting = !this.greeting;
20             }
21         }
22     });
23 </script>

Rendering results:

Because v-if is used to generate and delete nodes, unless you need to generate and delete nodes in a particular application scenarios Some shopping cart, etc., in most cases needs to do is just show and hide, so this time there is no need to remove a node, only need to implement a node operation display style, so the next instruction v-show presentation.

Two, v-show: to show or hide an element

 1 <div id="example">
 2     <button v-on:click="ifEvent">点击</button>
 3     <div v-show="greeting">hello</div>
 4 </div>
 5 <script>
 6     var vm = new Vue({
 7         el:'#example',
 8         data:{
 9             greeting:true
10         },
11         methods:{
12             ifEvent(){
13                 this.greeting = !this.greeting;
14             }
15         }
16     });
17 </script>

To show and hide achieve by v-show, in fact, it is the operating elements display style attributes, such as the example of the hidden div is the element structure is:

However, note that the v-show does not support the <template> syntax.

vi-if inert, if the condition is false at the time of the initial rendering does nothing, only in local conditions will compile compile render true, and the compiler will be cached.

Since there exist v-if's, v-else how can small?

三, V-else

Grammatical meaning of the v-else directive is consistent with javascript else, it must be used in conjunction with v-if, but can not be used in conjunction with the show.

1  < div the above mentioned id = "Example" > 
2      < the Button v-ON: the Click = "ifEvent" > Click </ the Button > 
3      < div v-IF = "the Greeting" > I am a member </ div > 
4      < div V- the else = "the Greeting" > I am a super affiliate </ div > 
5  </ div > 
6  < Script >
7      var vm =  new Vue ({
 8          on:'#example',
 9         data:{
10             greeting:true
11         },
12         methods:{
13             ifEvent(){
14                 this.greeting = !this.greeting;
15             }
16         }
17     });
18 </script>

If v-show also need to implement if the switching can be employed to achieve a non-value, such as v-else above may be used in such a manner to achieve the following:

< Div v-Show = "! The Greeting" > I am a super affiliate </ div >