conditional rendering
Conditional rendering directives are used to assist developers in controlling the display and hiding of the DOM. There are two conditional rendering instructions:
v-show and v-if
The difference between v-show and v-if:
v-show is to show and hide elements by dynamically adding or removing display:none. If you need to switch the display state of an element frequently, v-show will perform better.
v-if shows and hides elements by dynamically creating or removing them. If you don't need to switch the display state of the element frequently, the performance of v-if will be better.
Instructions for v-if:
v-else-if is similar to the use of else if
v-else is similar to the use of else
<script src='https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js'></script>
</head>
<style>
.div1 {
width: 200px;
cursor: pointer;
}
</style>
<body>
<div class="myH">
<div class="div1" @click="fn">
<p>Click me to show the drop down box</p>
</div>
<div class="div1" v-show="flag">
<p>drop down box one</p>
<p>drop down box one</p>
</div>
<div class="div1" v-if="age<18">
<span>
young people
</span>
</div>
<div v-else-if="age>=18">
<span>
adults
</span>
</div>
</div>
<script>
var vue = new Vue({
el: ".myH",
data: {
flag: false,
age:22
},
methods: {
fn() {
this.flag = !this.flag
},
}
})
</script>
loop rendering
1.v-for loop ordinary array: v-for="(em,index) in arr1"
2.v-for loop object array: v-for="(em,index) in arr2"
3.v-for iteration object: v-for="(em, index) in arr3"
4.v-for iteration numbers: v-for="count in 10"
<style>
.div1{
display: inline-block;
}
</style>
<body>
<div class="myH">
<!--v-for loop through normal array-->
<div v-for="(em, index) in arr1" :key="index" class="div1" style="background-color: royalblue;">
<p>{{em}}</p>
</div>
<!--v-for loop through an array of objects-->
<div v-for="(em, index) in arr2" :key="index" class="div1" style="background-color: aqua;">
<p>{{em.name}}
{{em.age}}
{{em.like}}
</p>
</div>
<!-- v-for iterate object -->
<div v-for="(em, index) in arr3" :key="index" class="div1" style="background-color: rgb(7, 146, 146);">
{{em}}
</div>
<!--v-for iterate numbers; in Later, we let go of arrays, object arrays, objects, and we can also put numbers-->
<!-- If using v-for If iterating over numbers, the front count The value starts from 1-->
<div style="background-color: rgb(185, 218, 218);">
<p v-for="count in 10" class="div1">the first{{count}}Second-rate</p>
</div>
</div>
<script>
var vue = new Vue({
el: ".myH",
data: {
arr1: [5,4,3,2,1],
arr2: [{name: "ljy",age: 21,like: "fitness"},
{name: "jack",age: 11,like: "swim"},
{name: "mary",age: 25,like: "climb mountains"},
{name: "Arali",age: 33,like: "Food"
}],
arr3:{
name: "jack", age: 11, like: "swim"
}
},
})
</script>
The meaning of key in v-for
When vue refreshes the page component, it will compare the old node with the new vm node. If you want to add a node, it will not delete the old node, but reuse it; this will cause the node to be re-rendered without being bound to the data. A key can bind data to a node.
<div id="app">
<h1>Activity:Choose 5 items from 10 items as a reward</h1>
<button type="button" @click="add">load new item</button>
<button>submit</button>
<div>
<div v-for=" (item,index) in arr" :key="item.id">
<input type="checkbox" name="goods" />
{{item.name}}
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
arr: [
{ id: 10001, name: "Item 1", },
{ id: 10002, name: "Item 2", },
{ id: 10003, name: "Item 3", },
{ id: 10004, name: "Item 4", }
],
count: 5
},
methods: {
add() {
//Network request and then add the new item to arr
//Pretend the network has requested new data
var result = this.count++
this.arr.unshift({ id: result, name: "commodity" + result})
}
}
})
</script>
for and if have the same label bug:
When for and if are placed in the same label, there is no requirement for sequence, but for is executed first
The rendering process is: first do a map loop for each item of arr to judge the conditions given by v-if, and then do the for loop rendering again
The problem caused by this is: when a new item of data is added to the arr array, the v-if loop will be repeated for each item, and then the for loop will be rendered.
The solution is to get the for to the outermost layer
If if and for are in a layer, when the data container changes, if will judge again
Nested writing When the data container changes, if only judges the newly added data
In this way, when a certain item of data in the arr array changes, only v-if judgment is performed on the newly added data, which saves rendering efficiency.
This will create a new problem: the outer for div will also create a mount to the DOM
Solution: wx uses block element vue? template is actually fragment in dom operation