Article directory
Preface summary
I am only making personal study records. Please forgive me if there are any mistakes.
Main learning links:Shang Silicon Valley Vue2.0+Vue3.0 full set of tutorials丨vuejs from entry to master
Conditional rendering
Conditional rendering, as the name implies, will render it to you only when the conditions are met, and then display it.
You can use two instructions to complete this operation: v-show and v-if instructions.
Among themv-show command hides elements that are not displayed, the structure is still there , that is, although it is not visible in your browser page, you can still see it when you open the console to view the source code. This is achieved by modifying the underlying display attribute.
Butv-if is different. It directly deletes the entire knot structure is invisible in your web page and does not appear in the source code, so it consumes more resources. If changes are frequent, it is not recommended to use v-if.
As long as the Boolean value of the expression behind v-show and v-if is true, it will be displayed, and if it is false, it will not be displayed.
v-show
If you write the code like this:
<body>
<div id="box">
<h1 v-show="a===false">显示a</h1>
<button @click="a=!a">改变a的数值,a现在={
{a}}</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#box',
data: {
a:false
},
})
</script>
</body>
Then you can already control the display and hiding of elements through v-show, by transferring the control of hiding or displaying elements to the Vue framework.
Of course, you can also write some functions to return a Boolean value. The value after v-show only needs to be a Boolean value, true to display and false to hide.
Rendering effect:
Display:
hide:
When v-show is implemented, the element is hidden, and the structure of the element still exists.
v-if
If you modify this part of the above code (the rest remains unchanged):
<h1 v-if="a===false">显示a</h1>
The presentation effect will be very different:
Display:
Hide:
When v-if follows When the boolean value is false, the entire structure is deleted and replaced with an annotation.
v-else-if和v-else
Change the above code to this:
<body>
<div id="box">
<h1 v-if="a===1">显示1</h1>
<h1 v-else-if="a===2">显示2</h1>
<h1 v-else-if="a===3">显示3</h1>
<h1 v-else>显示hh</h1>
<button @click="a++">a+=1,a现在={
{a}}</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#box',
data: {
a:1
},
})
</script>
</body>
When the condition after v-if is true, the subsequent v-else-if and v-else conditions will not be judged. If you write them all as a bunch of v-if, then it will continue to judge.
When a>=4, only 'display hh' will always be displayed, which is the same as the logic in other programming languages.
It should be noted that v-if and v-else-if only, v-if and v-else-if, v-if and v-else-if and v-else, If these combinations appear, no other tags that do not contain other tags can appear in the middle of the tags, and they must always be kept as a tight whole
Error demonstration cannot be written like this:
<h1 v-if="a===1">显示1</h1>
<h1 v-else-if="a===2">显示2</h1>
<h1 v-else-if="a===3">显示3</h1>
<h1>333</h1>
<h1 v-else>显示hh</h1>
Special writing method, how to eliminate many consistent v-ifs
<h1 v-if="a===1">显示1</h1>
<h1 v-if="a===1">显示2</h1>
<h1 v-if="a===1">显示3</h1>
For example, if it is written like this, the judgment conditions of three consecutive lines are the same. You can use div tags to wrap it, like this, but this method of writing is not recommended because it will destroy the DOM structure.
<div id="box">
<div v-if="a===1">
<h1>显示1</h1>
<h1>显示2</h1>
<h1>显示3</h1>
</div>
But there is a special similar way of writing that will not destroy the DOM structure, and that is to use template, like this:
<template v-if="a===1">
<h1>显示1</h1>
<h1>显示2</h1>
<h1>显示3</h1>
</template>
The template will automatically disappear after the parsing is completed. Unlike the div tag, which will exist in the HTML file and destroy the DOM structure, making the originally positionable code invalid.
Summarize
This is the end.
如果你觉得这篇文章写的不错，多多点赞~收藏吧！