Vue.js框架快速入门简明教程（二）（条件语句、循环语句和实例分析） _v-if和v-show

一. v-if和v-show条件语句1、V-if条件判断语句
V-if指令是vue.js中的条件语句指令，可以在任何元素和emplate 中使用，用于判断条件是否成立，返回值是布尔类型( bool)false和true。和javascript一样中的if条件判断语句一样，v-if 也是惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块，所以v-if是vue.js中的条件渲染。

< div id="app"> < p v-if="Math.random() > 0.5"> 随机数＞0.5< /p> < p v-else> 随机数< =0.5< /p> < /div>

在javascript的条件判断语句中有if… else… 、if… else if… else if… ，在vue.js中也同样有v-if… v-else-if… v-eles-if… 可以链式的多次使用，然而在vue.js中是作用于html代码块。

< div id="app"> < p v-if="Math.random()===1"> 随机数=1< /p> < p v-else-if="Math.random()===2"> 随机数=2< /p> < p v-else-if="Math.random()===3"> 随机数=3< /p> < p v-else> 随机数> 3< /p> < /div>

2、v-show
V-show是根据条件来判断是否展示元素，只是简单地基于 CSS 进行切换是否隐藏或者显示，而在vue.js的底层，所有被作用于v-show的元素都会被渲染。

< div id="app"> < p v-show="ok"> vue.js中的v-show实例解释< /p> < /div> < /body> < script> new Vue({ el: '#app', data:{ ok:false } }) < /script>

文章图片
【Vue.js框架快速入门简明教程（二）（条件语句、循环语句和实例分析）】这里要区分v-if和v-show的渲染特点，v-if 会确保条件块内的事件监听器和子组件适当地被销毁和重建。而v-show则是全部渲染后再通过改变css的dispaly属性来控制是否显示。由此可以知道，一般情况下，v-if会更加节省资源，开销低，而v-show全部渲染开销高，比较耗费资源。
二. v-for循环语句v-for的基本语法是：