<div v-if="status === 1">
	1
</div>
<div v-else-if="status === 2">
	2
</div>
<div v-else>
	3
</div>
Copy the code

0- Instructions from parsing, to node information, to rendering

1- Get the directive attribute parseStartTag() on the tag

## v-if
element1 = {
	type:1,
    tag:'div',
    attrsList:[{name:'v-if',value:"status === 1"}],
    attrsMap:{'v-if':"status === 1"}
}
## v-else-if
element2 = {
	type:1,
    tag:'div',
    attrsList:[{name:'v-else-if',value:"status === 2"}],
    attrsMap:{'v-else-if':"status === 2"}
}
## v-else
element3 = {
	type:1,
    tag:'div',
    attrsList:[{name:'v-else',value:undefined}],
    attrsMap:{'v-else':undefined}
}
Copy the code

2- Parse directive attributes (processIf, closeElement)

## v-if element1 = {type:1, tag:'div', attrsList:[], / / remove about v - if the properties of the object attrsMap: {' v - if: "status = = = 1"}, the if: "status = = = 1", IfConditions :[{exp:"status === 1",block:element1}, } ## v-else-if element2 = {type:1, tag:'div', attrsList:[], / / remove about v - else - if the properties of the object attrsMap: {' v - else - if: "status = = = 2"}, elseif: "status = = = 2", V-else element3 = {type:1, tag:'div', attrsList:[], attrsMap:{'v-else':undefined}, Else :true, // Add node attribute} /********* Finally only v-if attribute has ifConditions attribute to hold our v-if expression (exp) and corresponding node (element). Because our V-else (-if) attribute will put our node in ifConditions in the V-IF tag when closing the tag containing the V-else, V-else -if directive. **/ element1 = {type:1, tag:'div', attrsList:[], attrsMap:{' V-if ':"status === 1"}, if:"status === 1", ifConditions:[ {exp:"status === 1",block:element1}, {exp:"status === 2",block:element2}, {exp: undefined, block: element3},]} note: - v - if and v - else (- if) cannot have middle node (type = = = 1) / / will generate alarm - v - if and v - else (if) in the middle of the text will be ignored.Copy the code

3- genIf generation of render function

For node element1 with if attribute, the rendering function of genif attribute returns the corresponding condition will be run (the mixture of V-if and V-once is not considered for the moment). genIfConditions=[ {exp:"status === 1",block:element1}, {exp:"status === 2",block:element2}, Exp: undefined, block: element3, attach] for element1, returns a ternary expressions: (exp1? genElement(element1) : GenIfConditions) if the first exp condition is satisfied, the corresponding element1 will be used. If the first exp condition is not satisfied, the next exp condition will be judged and the corresponding element2 will be used to establish the condition. For V-else, Exp is undefined, so use undefined element3. V-else -if there is no corresponding exp, the parsing result is the same as v-else.Copy the code