vue v-show v-bind v-if v-else v-else-if

1.

v-show和v-if都可以控制元素的显示或隐藏

v-show 例：

   
{{msg}}
   
{{msg}}
 

QQ图片20180913145953.png

例：点击显示和隐藏

 





 

   显示、隐藏
   

 

QQ图片20180913150936.png

2.v-bind

v-bind：属性名='事件名' 绑定属性

例：点击图片即可切换

QQ截图20180913151814.png

例：v-bind 点击标签切换图片

  







 

   
   

       
{{index+1}}
   
 
 

QQ截图20180913153024.png

3.

条件判断使用 v-if 指令，
可以用 v-else 指令给 v-if 添加一个 "else" 块，
v-els-if用作 v-if 的 else-if 块。可以链式的多次使用，
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
例：

   
00000000000
   
1111111111
   
22222222
   
555555555555