vue.js的条件渲染，其实就是模板里面写if else

Posted 2021-05-01 web前端教室

模板里面写逻辑判断在早期只有二种方法，一是用什么插件来搞；二是自己写一个模板然后正则匹配判断结果去替换字符串。其实这二种方法都是一样的，因为什么模板的插件十有八九也得自己来写。

烦的很，所以早期模板的功能也很弱，基本上只能是view的展现而已。

////////

vue的条件渲染很好用，至少它在模板语言里实现了逻辑判断。别的不说， 我在2013的前后使用过Handlebars这个模板，它的if什么的功能就很弱，弱到几乎等于没有。

这里提一下渲染这个词，其实就是生成dom节点。跟浏览器的渲染过程基本没关系，同学们不要一看到前端渲染就觉得很高大上，其实就是createElement一些dom，然后appendChild到一些dom上去而已。要不就是删除一些再生成再添加，反正就这么回事。

我如果说错了，欢迎来喷我，Orz

////////

回说vue的条件渲染，它使用的指令是v-if，后面还有个v-else，这二个要写到dom上，然后v-else的dom必须跟着v-if，形成一个if else的判断结构。

<div v-if="Math.random() > 0.5">

  Now you see me

</div>

<div v-else>

  Now you don't

</div>

还有v-else-if，也得紧跟着，中间不能有其它元素，

<div v-if="type === 'A'">

  A

</div>

<div v-else-if="type === 'B'">

  B

</div>

<div v-else-if="type === 'C'">

  C

</div>

<div v-else>

  Not A/B/C

</div>

////////

vue的教程写到这里，感觉vue的学习曲线应该是比react要缓和一些。就是很直观，很“自然语言”。

看资料说，v-if的切换消耗资源会多些，也许这里是一个web性能优化的点。