在vue项目中,不可避免的会遇到这三剑客(v-if、v-show、v-for),大部分人可能知其然不知其所以然,因此特花一篇文章来说明
v-if
这是一个条件表达式,与之搭配的是v-else,通常用于组件的显示与隐藏中。v-if 在隐藏时会直接移除那个元素,显示时则会重新创建一个新的元素。当初始条件为真时,才会开始渲染,除此之外,不会渲染
v-show
顾名思义,这就是用来显示某一个组件的,其效果在v-if应用于组件的显隐中时相同。区别是v-show是隐藏dom元素,相当于给原来的dom增加一个“display:none”的样式,不会直接移除这个元素。
v-show不支持<template>元素,也不支持v-else;且不管条件是什么,v-show总会在初始时被渲染,且会一直保留
v-for
从字面上理解,这是一个for循环(可以循环Array和Object),通常在需要循环数据中使用(比如列表类的渲染)。有一点需要注意的是v-if与v-for不能同时使用在一个元素上,v-for
具有比 v-if
更高的优先级,v-for中不能写v-if。
v-for 的默认行为试着不改变整体,而是替换元素,迫使其重新排序,