Vue.js从0开始到实战开发4:v-show指令、v-if指令、v-bind指令讲解与实现图片切换图案例

v-show指令

根据表达值的真假,切换元素的显示和隐藏。

在这里插入图片描述
在这里插入图片描述

v-if指令

根据表达值的真假, 切换元素的显示和隐藏(操纵dom,但是有些时候操纵dom会开销比较大)

在这里插入图片描述

v-bind指令

设置元素的属性(图片的地址src、title、class等,都写在元素的内部。)

在下面有一个class类写法和一个三元写法,推荐用class类的写法。

在这里插入图片描述

切换图片

在这里插入图片描述
声明:本文是来自黑马程序员b站教程的学习笔记,侵权删。

猜你喜欢

转载自blog.csdn.net/weixin_51484460/article/details/124616175