3. Vue基本指令2/3——显示切换、属性绑定

一、v-show

• 根据表达式的真假，切换元素的显示和隐藏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M2PSFKow-1612975904521)(en-resource://database/865:1)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-71Uyb8kI-1612975904536)(en-resource://database/867:1)]

二、v-if

• 根据表达式真假，切换元素的显示与隐藏（直接操纵DOM元素）
• 使用与v-show类似，区别：
  • v-show实际上是将元素的display:none，
  • v-if则是直接将元素从DOM树中移除；
  • 频繁切换某节点，使⽤v-show(切换开销⽐较⼩，初始开销较⼤)，
  • 不需要频繁切换某节点使⽤v-if（初始渲染开销较⼩，切换开销⽐较⼤）；

三、v-bind

• 作用、为元素绑定属性
• 写法、v-bind: 属性名，简写 : 属性名
  例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eOYdYiLD-1612975904547)(en-resource://database/869:1)]

• 也可绑定元素的class（常用在active）
  例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-47Q2YoUn-1612975904553)(en-resource://database/871:1)]

效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kRwwdOg2-1612975904558)(en-resource://database/879:1)]

四、实现图片轮播且上下键符合逻辑

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s9CKdEC3-1612975904560)(en-resource://database/881:1)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e9McXI77-1612975904563)(en-resource://database/883:1)]