Vue.js 源码分析(十七) 指令篇 v |
您所在的位置:网站首页 › vue vif velse › Vue.js 源码分析(十七) 指令篇 v |
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。 v-else-if,顾名思义,充当 v-if 的“else-if 块”,可以连续使用: 也可以使用 v-else 指令来表示 v-if 的“else 块”: 挺好理解的,就和大多数的语言的if()....else if()...else逻辑语句是一样的,例如: DOCTYPE html> Document Vue.config.productionTip=false; Vue.config.devtools=false; n小于0 no等于0 no大于0 var app = new Vue({el:'#app',data:{no:2}})writer by:大沙漠 QQ:22969969 渲染为: 有两个注意点: v-else和v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后,一会儿将源码的时候会讲到为什么 因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个 元素当做不可见的包裹元素,
源码分析 Vue内部会把v-if、v-else、v-else-if解析称为一个三元运算符,如果有多个v-else,则三元运算符内再嵌套一个三元运算符,以例子里的为例: 解析模板解析到n小于0这个DOM元素时会执行到processIf()函数 function processIf (el) { //第9402行 解析v-if指令 var exp = getAndRemoveAttr(el, 'v-if'); //获取表达式,例如:"no |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |