Vue笔记整理，让你快速入门Vue.js：03_9.本地应用：图片切换

目录

一、前言

二、实现思路

三、实战代码

1、具体代码

2、知识点复习

（1）理解 javascript:void(0)

（2）alt 属性

四、内容-总结

---

一、前言

上一节我们介绍了v-bind指令（为元素绑定属性），详见博文：Vue笔记整理，让你快速入门Vue.js：03_8.本地应用：v-bind指令（为元素绑定属性）这篇博文我们来写一个小案例：图片切换

 

二、实现思路

1、点击切换图片，其实本质是切换 img 标签的 src 属性值。

属性用什么操作？在 Vue 中，我们可以使用 v-bind 指令。

2、图片的个数有很多个，我们可以使用数组，数组的取值我们结合索引。

并且使用数组，我们可以非常便捷的判断，是否为第一张或是最后一张。

我们只需判断索引的值和数组的长度大小即可。

3、在第一张和最后一张图片的时候，我们分别隐藏左边和右边的箭头。

显示隐藏箭头，其实本质是操纵 a 标签的 display，a 标签在点击的时候，要执行逻辑，事件绑定用 v-on 指令。

在第一张或是最后一张的时候，我们需要对应的 a 标签。

为了实现这个功能，我们学过两个指令，一个是 v-if，一个是 v-show，

但是因为切换的比较频繁，所以考虑性能的话，我们使用 v-show 指令，会更加的适合。

 

三、实战代码

 

1、具体代码

  
  
  
  
  



  


    

      

        
        深圳创维校区环境
      
      
      

      
      
          
        
      
      
        
      
    

  

  

  

 

2、知识点复习

 

（1）理解 javascript:void(0)

javascript:void(0)：我们可暂时理解为，停留在原地，一动不动，我们称之为“死链接”

可详细的解释，可参考博文：

javascript:void(0) 含义【推荐】

javascript:void(0);用法及常见问题解析【推荐】

https://www.cnblogs.com/duxiu-fang/p/11104735.html

javascript中void(0);用法及常见问题解析

 

（2）alt 属性

alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。

https://www.w3school.com.cn/tags/att_img_alt.asp

https://www.runoob.com/tags/att-img-alt.html

 

四、内容-总结