<>v-if Use of

Vue Based on the value of the expression DOM Render or destroy elements or components in .

v-if Principle of :
v-if The following conditions are false Time , The corresponding element and its children are not rendered .
That is, there will be no corresponding label DOM in .
<div id="app"> <h2 v-if="score>=90"> excellent </h2> <h2 v-else-if="score>=80"> good </h2> <
h2 v-else-if="score>=60"> pass </h2> <h2 v-else> fail, </h2> <h1>{{result}}</h1> </div>
data: { score:70 }, computed:{ result(){ let showMessage=''; if(this.score>=90){
showMessage=' excellent '; } else if(this.score>=80){ showMessage=' good ' } else if(this.
score>=60){ showMessage=' pass '; } else{ showMessage=' fail, '; } return showMessage; }
<>v-show Use of

v-show Usage and v-if Very similar , Also used to determine whether an element is to be displayed in the interface .
<div id="app"> <!-- dom Element no longer exists Use only one switch --> <h2 v-if="isShow" id="aaa">{{
message}}</h2> <!-- dom Element exists but does not display Added an inline style display:none Use when switching frequently --> <h2 v-show=
isShow id="bbb">{{message}}</h2> </div> data: { message: 'nihao', isShow:false }
<> How to choose in development ?

When you need to slice between show and hide frequently , use v-show
When there is only one switch , through the use of v-if

<>v-show And v-if difference

Similarities : Both are judgments DOM Does the node want to be displayed .
difference :

* Implementation mode :
v-if It is based on the true and false values of the following data to determine the direct Dom Delete or rebuild element nodes on tree .
v-show Just modifying the element's css style , that is display Property value of , Element always in Dom on the tree .
* Performance consumption :
v-if Higher switching consumption , Not suitable for frequent switching ;
v-show Higher initial render consumption , Suitable for frequent switching ;
* Compilation process :
v-if Switch has a local compilation / Uninstallation process , Properly destroy and rebuild the internal event monitor and subcomponents during the handover ;
v-show It's simply based on css switch ;
* Compilation conditions :
v-if It's inert , If the initial condition is false , Do nothing ; Local compilation starts only when the condition first becomes true ;
v-show Under any conditions ( Is the first condition true ) All compiled , Then cached , and DOM Element is always reserved ;
<>v-for Use of

When we have a set of data to render , We can use v-for To complete .

v-for The syntax of is similar to JavaScript In for loop .
The format is as follows :item in items Form of .

<>v-for Traversal array
<!-- During traversal , Get index value --> <ul> <li v-for="(item,index) in names">{{index+1}}.{{item
}}</li> </ul> data: { names: [' One Piece ', ' East evil and West poison ', ' Interstellar crossing ', ' A journey to the West ', ' Inception '] }
<>v-for Traversal object
<ul> <!-- value --> <li v-for="item in info">{{item}}</li> </ul> <ul> <!--
The first one is all value--> <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}<
/li> </ul> data: { info:{ name:'minmin', age:18, height:1.88 } }
<>v-for Add during use key
<ul> <li v-for="item in letters">{{item}}</li> </ul> data: { letters:['A','B',
'C','D','E'], }

At this time, if I want to B C Insert a F element ,

real DOM Before rendering to the browser, a virtual DOM,
fictitious DOM There will be many li, Create 5 individual ,
And then virtual DOM Things in patch To the real DOM above

li1 -> A ======== li1 -> A
li2 -> B ======== li2 -> B
============== li6 -> F
li3 -> C ======== li3 -> C
li4 -> D ======== li4 -> D
li5 -> E ======== li5 -> E

Contrast reality DOM And virtual DOM What are the differences on it , I found a lot F, And then F Insert it , It will be very high performance .
There will be diff algorithm .Diff By default, the algorithm performs as follows , -- replaced . I.e C Update to F,D Update to C,E Update to D, Insert last E, Is it inefficient .
li1 -> A ======== li1 -> A
li2 -> B ======== li2 -> B
li3 -> C ======== li3 -> C === -> F
li4 -> D ======== li4 -> D === -> C
li5 -> E ======== li5 -> E === -> D
li6 -> =================li6 -> E

If added key, Will improve performance . use key To make a unique identification for each node .
Diff The algorithm can correctly identify this node , Find the right location area to insert a new node .

<li v-for="item in letters" :key="item">{{item}}</li>
binding index It doesn't make sense , ensure key It corresponds to the element to be bound later , Once inserted F after , customary C Of index yes 2, And then 3, It's not one-to-one .

If there is key, Give priority to key One to one correspondence with what is to be displayed ; No, key When , It's going to come back in turn .

key The main purpose is to update the virtual environment efficiently DOM.
use v-for When updating the list of rendered elements , It defaults to “ Local multiplexing ” strategy . If the order of data items is changed ,Vue Will not move DOM Element to match the order of data items ,
Instead, simply reuse each element here , And make sure it shows each element that has been rendered under a specific index .
in addition vue When using the transition switch of the same label name element in , It will also be used key attribute , Its purpose is also to make vue They can be distinguished ,

<>v-if and v-for Disadvantages of using together and Solutions

because v-for Priority ratio of v-if high , That's why every cycle goes v-if once , and v-if By creating and destroying dom Elements to control the display and hiding of elements , So you're constantly creating and destroying elements , Cause page jam , Performance degradation . If necessary, it should be replaced by computed attribute .

terms of settlement : stay v-for To enclose an element for use v-if

©2019-2020 Toolsou All rights reserved,
It's unexpected Python Cherry tree (turtle The gorgeous style of Library ) Some East 14 Pay change 16 salary , Sincerity or routine ? Browser kernel ( understand )java Four functional interfaces ( a key , simple )HashMap Explain in detail html Writing about cherry trees , Writing about cherry trees os Simple use of module