First, in the actual development stage , Should not put v-if and v-for Use... In the same label ,
stay vue2 in ,v-for Priority is higher than v-if Of , If it appears at the same time , Each rendering will execute a loop first and then judge the conditions , In any case, the cycle is inevitable , Wasted performance ; Another thing to note is that vue3 On the contrary ,v-if Has a higher priority than v-for, therefore v-if Execution time , The variable it calls doesn't exist yet , It leads to an exception .
We usually do this in two cases
- To filter the items in the list ( such as ：
v-for="user in users" v-if="user.isActive"). At this point, define a calculation attribute （ such as ：activeUsers）, Let it return to the filtered list （ such as ：users.filter(u=>u.isActive)） - To avoid rendering lists that should have been hidden （ such as
v-for="user in users" v-if="shouldShowUsers"）, At this timev-ifMove to container element （ such asul、ol） Or it's wrapped in a layertemplatethat will do .
<div id="app">
<p v-for="child in children" v-if="isFolder">{{child.title}}</p>
</div>
<script>
const vm=new Vue({
el:'#app',
data(){
return{
children:[
{
title:'red'
},
{
title:'green'
}
]
}
},
computed:{
isFolder(){
return this.children&&this.children.length>0
}
}
})
console.log(vm.$options.render);
The rendering functions are as follows ：
ƒ anonymous(
) {
with(this){return _c('div',{attrs:{"id":"app"}},_l((children),function(child){return (isFolder)?_c('p',[_v(_s(child.title))]):_e()}))}
}
Optimized code ：
<template v-if="isFolder">
<p v-for="child in children">{{child.title}}</p>
</template>
The rendering functions are as follows ：
ƒ anonymous(
) {
with(this){return _c('div',{attrs:{"id":"app"}},[(isFolder)?_l((children),function(child){return _c('p',[_v(_s(child.title))])}):_e()],2)}
}
v-if and v-for Which is the higher priority ？ More articles about
- SAP WM TO Print Control In the set ,Movement Type Higher priority
SAP WM TO Print Control In the set ,Movement Type Higher priority Configuration of storage type : from storage type GRM Move anywhere , No need to print TO single . Mobile type configuration ...
- python—— Than return Higher priority statements
call sqlmap, Use sqlmap When doing secondary development , What happened : Calling sqlmap in return, However, the main program will still be sqlmap Some of the code in interrupt . add to try There's no way to stop interruptions . Later it was speculated that the interruption was caused by ex ...
- poj 2762 Going from u to v or from v to u?
Title Description : To make their son braver ,Jiajia and Wind Take them to a big cave . There's a hole in the cave n A room , There are some one-way channels connecting certain rooms . Every time ,Wind Choose two rooms x and y, Ask one of their sons to walk from a room to ...
- turn ：oracle Several important sets of common views -v$undostat,v$open_cursor,v$rowcache,v$session_longops,v$waitstat
v$undostat This view monitors... In the current instance undo Space and how transactions work . And statistics undo Space overhead , Transaction cost and query length available for instance . V$UNDOSTAT Common columns in Endtime: With 10 Minutes is the end of the interval ...
- turn ：oracle Several important sets of common views -v$segstat,v$segment_statistics,v$filestat,v$rollstat
v$segstat This view monitors segment level in real time (segment-level) Statistical items , Support oracle9ir2 And higher V$SEGSTAT Common columns in TS#: Table space identifier OBJ#: Dictionary object id DATAOBJ ...
- turn ：oracle Common important views -v$sql,v$sql_plan,v$sqltext,v$sqlarea,v$sql_plan_statistcs
v$sql V$SQL Store specific SQL sentence . A statement can map multiple cursor, Because the object refers to cursor There can be different users ( For example 1). If there are more than one cursor( Child cursors ) There is , stay V$SQLAREA For all c ...
- turn ：Oracle Several important sets of views in --v$sysstat,v$system_event,v$parameter v$system_parameter
Several important performance views by component 1.System Of over view v$sysstat , v$system_event , v$parameter,V$instance obtain oracle_sid ...
- poj 2762 Going from u to v or from v to u?（ Strong connectivity 、 Shrinkage point 、 Topology ）
The question :( You're wrong ) There are many in a cave room, It is required to select any two room:u.v, Can guarantee u.v There is a path between , Note that the path in the cave has a directional edge .. analysis : The points in a strongly connected subgraph must be interconnected , There is a path between two strongly connected subgraphs ...
- Oracle Basic data dictionary :v$database、v$instance、v$version、dba_objects
v$database: View structure : SQL> desc v$database; Name Null? Type - ...
- POJ2762 Going from u to v or from v to u( Simply connected Shrinkage point )
Determine whether the graph is simply connected , First, deal with the strongly connected partition graph , Then topological sorting , Attention should be paid to : What meets the requirements is not necessarily the unique result of the chain topology arrangement , That is, there is always only one element in the queue #include<cstdio> #include< ...
Random recommendation
- Conditional comments judge browser version <!--[if lt IE 9]>
<!--[if !IE]><!--> except IE All can be recognized <!--<![endif]--><!--[if IE]> be-all IE Recognizable <
