In this article, let's take a look at the usage of v-for, v-if, and v-show commands. These three commands are commonly used. By the way, we will explain a high-frequency interview question: the difference between v-if and v-show.
v-for
v-for is very common in actual business development. When we learn some high-level languages, we all know the for loop . Through the loop, we can traverse the data groups with similar data specifications .
Let's think about a business scenario: In the mall, we click on a product category, and many products with similar specifications will be rendered .
If 20 sets of products are rendered, should 20 identical components be written? Programmers must not be so stupid.
The content of a product card may include pictures, names, prices, inventory, and product descriptions. These 20 products are all these fields, but the value of the field is changed.
So, this is what the v-for instruction does.
Using v-for, we can use a product card code to render endless products as long as we want.
Let's talk about the basic syntax:
<div id="app">
<ul>
<li v-for="item in items">
{
{item}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
items:[59,82,96,41,55,2,4,91,25],
},
});
</script>
This is the most basic usage of v-for . Both items and items in v-for can be changed arbitrarily, but items must have the same name as the array to be rendered . Because the name of the array in my data is items, I also write items here .
Let's take a look at the effect first:
if we want to index , just change the content in v-for to " (item, index) in items ".
<ul>
<li v-for="(item,index) in items">
索引:{
{index}},内容:{
{item}}
</li>
</ul>
Take a look at the effect:
In some business scenarios, we need the help of indexes.
Above we talked about the rendering of arrays , let's talk about the rendering of objects .
<div id="app">
<ul>
<li v-for="item in Students">
{
{item.name}} - {
{item.age}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
Students:[
{
name:'Ray',
age:18
},
{
name:'Creator',
age:20
},
{
name:'Code',
age:3
}
]
},
</script>
Let's take a look at the result first:
the code form of the rendering object is very similar to the rendering array. When we render the array, we
only need to write item in the interpolation expression { {}}, but when rendering the object, we need {
{item.attribute}} , which is actually relatively simple. The usage of index is the same as that of array .
Because of the limited space, we just cite a very small example. The application scenarios of v-for are very wide and can optimize a lot of code for us.
v-if
How do we control whether a component is displayed ? In fact, there are many methods, but the v-if provided by vue is very easy to use.
The basic code is as follows:
<div id="app">
<p v-if="msg">我被显示了</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:true
}
});
</script>
We wrote a v-if on the p tag and bound a variable to msg. In data, we assign the Boolean value true to msg, so, logically speaking, this p tag will be displayed.
no problem.
The usage of v-if is very simple , but the application scenarios are also very extensive . We can handle the variable values bound by v-if in many method events to control the display and hiding of components . This instruction is very, very important .
v-show
Speaking of v-show, its function is the same as v-if. But they are fundamentally different. This difference is often asked in interviews.
Let's first write its basic code format:
<div id="app">
<p v-show="msg">我被显示了</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:true
}
});
</script>
Is it the same as v-if?
But let's take a closer look. When we change the value of msg to false , open F12 and look at the code.
There is indeed no content displayed on the page. but! ! ! In the DOM structure, the p tag has actually been mounted, but the value of the CSS display property has been changed to none ! ! !
We use the same operation to look at the DOM structure of v-if .
The p tag is not mounted on the DOM ! ! !
So this is the most fundamental difference between v-if and v-show , knock on the blackboard. This knowledge point is extremely high in some basic interviews .
Both v-if and v-show have their own application scenarios. You can think about it carefully. According to their characteristics, when to use v-if and when to use v-show. It's worth thinking about.
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Follow the WeChat official account below, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials
