1-4 vue常用指令 v-show

vue常用指令 v-show

1.v-show

• v-show指令 也是条件渲染指令，不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。
  • 和v-if指令不同点在于：v-show是根据表达式之真假值，切换元素的 display CSS 属性，当条件变化时该指令触发过渡效果。

    
显示出来!!!
    
不要显示!!!
    
身高:{{height}}

• v-show和v-if的区别：
  • v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件； v-show 则只是简单地基于 CSS 切换。
  • v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

2.v-else

• v-else指令 可以用v-else指令为v-if或v-show添加一个“else块”。

注意：v-else前一兄弟元素必须有 v-if 或 v-else-if。

 
    
{{message}}
    
{{word}}

3.v-else-if

    
优秀
    
良好
    
及格
    
不及格