Table of contents
3. The choice of v-if and v-show
one, v-if
v-if is a conditional statement of Vue.js. The v-if instruction is used to render a piece of content conditionally. This piece of content will only be rendered when the expression of the instruction returns true . What needs special attention is that v-if is associated with dynamic variables of Vue.js.
There are generally two scenarios for the use of v-if:
(1) Display or hide an element or multiple elements through conditional judgment
(2) Switch between views
Example of basic use of v-if:
<div id="root">
<!-- 使用v-if进行条件判断，条件为true则显示此标签，false则不显示 -->
<p v-if="seen">现在你看到我了</p>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
seen:true,
},
methods: {
}
})
</script>Results of the:
In the example above, seen is a variable defined by Vue.js. The variable value of v-if is generally true or false , when the variable value is true , the element is displayed , and when the variable value is false , the element is hidden
Example of basic use of v-else:
<div id="root">
<p v-if="seen">现在你看到我了</p>
<p v-else>你看不到我了</p>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
seen:false,
},
methods: {
}
})
</script>Results of the:
In the above example, when the value of the seen variable is true , the web page displays "You can't see me now" , and when the value of the seen variable is false , it displays "You can't see me anymore".
Example of basic use of v-else-if:
<div id="root">
<!-- v-else-if -->
<p v-if="type==1">1</p>
<p v-else-if="type==2">2</p>
<p v-else="type==3">3</p>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
type:2,
},
methods: {
}
})
</script>Results of the:
In the above example, when the type variable value is 1, "1" is displayed on the webpage; when the type variable value is 2, "2" is displayed on the webpage, and when the type variable value is 3, "3" is displayed on the webpage.
Note: v-else, v-else-if must follow v-if or v-else-if.
Two, v-show
v-show is another conditional rendering statement, which is used to display elements according to conditions, and the usage is roughly the same as v-if.
Example of basic use of v-show:
<div id="root">
<p v-show="ok">Hello!</p>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
ok:true,
},
methods: {
}
})
</script>Results of the:
Elements with v-show are always rendered and remain in the DOM. The v-show directive uses css styles to control the display and hiding of elements. It's worth noting that v-show doesn't support the <template> element , nor does v-else .
3. The choice of v-if and v-show
Both v-if and v-show can be used to dynamically control the display and hiding of DOM elements.
v-if is true conditional rendering because it will ensure proper destruction and rebuilding of event listeners and subcomponents inside the conditional block during the switch, v-if is also lazy, if the condition is false on initial render, then what Doing neither, the conditional block won't start rendering until the first time it becomes true.
v-show is much simpler, no matter what the initial condition is, the element will always be rendered, and it is simply switched based on css
Example comparison of v-if and v-show:
<div id="root">
<h1 v-show="seenShow">v-show:true</h1>
<h1 v-show="notSeenShow">v-show:false</h1>
<h1 v-if="seenIf">v-if:true</h1>
<h1 v-if="notSeenIf">v-if:false</h1>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
seenShow:true,
notSeenShow:false,
seenIf:true,
notSeenIf:false,
},
methods: {
}
})
</script>Browser Elements:
It can be seen that the hidden internal elements of v-if will not be displayed, Vue.js will not try to generate the corresponding html code, and v-show is controlled by css display: none.
Generally speaking, v-if must generate the DOM tree inside the element every time an element is inserted or removed, so it has higher switching overhead, while v-show has higher initial rendering overhead. So if you need to switch very frequently , it's better to use v-show ; if the conditions rarely change at runtime , it's better to use v-if