vue中的指令v-for循环遍历、v-if条件判断v-show,v-on事件监听、事件修饰符

vue中的条件渲染

v-else-if

当有else分支逻辑的时候,可以给该元素加上v-else指令来控制,v-else会根据上面的那个v-if来控制,效果与v-if相反,注意,一定要紧挨着

还有v-else-if指令可以实现多分支逻辑

在元素上使用v-if条件渲染分组

根据表达式的值true或false在DOM中生成或者移除一个元素(或多个元素)。
有点类似JavaScript中的if条件判断。在Vue中除了v-if也有v-else-if和v-else之类;


在元素上使用v-show条件渲染分组

除了v-if之外,Vue还提供v-show也可以控制元素的渲染。
v-show和v-if功能有点相似,其中v-if依赖于控制DOM节点,而v-show是依赖于控制DOM节点的display属性。
当v-show传入的值为true时,对应DOM元素的display的值为block之类的,反之为false时,display的值为none。也就是用户看不到元素的显示,但其DOM元素还是存在的

总结

v-if和v-show都是用来控制元素的渲染

  v-if是根据后面数据的真假,来判断DOM的添加删除等操作

  v-show只是在修改元素的css样式(display属性值)

  v-if如果初始渲染条件为真,就渲染,反之就不渲染

 

你可能感兴趣的:(vue,vue,node.js,vue.js,webpack,前端)