1.实现功能

2.目录结构

3.代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Test</title>

</head>

<body>

  <div id="app">

    <ul>

      <li v-for="(item, index) in testData">

        <span>

          <img :src="'./img/' + ((flag==index)?'test1.png':'test2.png')" @click="test(index)">{{index}}:{{item.content}}

        </span>

      </li>

    </ul>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

  <script>

    var app = new Vue({

      el: '#app',

      data: {

        flag: -1,

        testData: [{

            content: 'item1'

          },

          {

            content: 'item2'

          },

          {

            content: 'item3'

          },

          {

            content: 'item4'

          },

          {

            content: 'item5'

          },

        ],

      },

      methods: {

        test: function (index) {

          if (this.flag == index) { //  已经点击过

            this.flag = -1;

          } else { //  未点击过

            this.flag = index;

          }

        }

      }

    })

  </script>

</body>

</html>

vue入门：实现图片点击切换的更多相关文章

  1. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  2. JS原生隐藏显示图片,点击切换图片的效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...

  3. 关于使用JavaScript实现图片点击切换（附带改变导航图片 方案二）

    具体需求见方案一. 这种方案相比方案一更加专业. <!DOCTYPE html> <html> <head lang="en"> <met ...

  4. 3d图片点击切换

    效果图: 代码块: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  5. vue实现简单的点击切换颜色

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 利用DOM的方式点击切换图片及修改文字

    本案例主要学习理解,用到的几个DOM方法 01.getAttribute()方法,获取元素的属性值 02.setAttribute('src',source) 方法,用后边的值修改前边这个元素的属性值 ...

  8. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

  9. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

随机推荐

  1. 使用java applet通过签名访问客户端串口

    前端时间公司有需求要访问客户端串口读取电子称的数据,通过网上资料,决定使用applet通过电子签名的形式实现. 1.先写applet:这里我是使用RXRTcomm.jar LocalFileApple ...

  2. Web开发HTTP中URI和URL的情感纠葛

    作者:郭无心链接:https://www.zhihu.com/question/21950864/answer/66779836来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  3. python30题

    1.执行Python 脚本的两种方式 使用python解释器(python aa.py)或在unix系统下赋值成777,执行(./aa.py) 2.简述位.字节的关系 1个byte = 8bit,在A ...

  4. 为mongodb添加账号

    进入切换到某一个数据库,我这里是位每个模块分配一个DataBase use 0 执行添加账号命令 db.createUser( { user: "*****", pwd: &quo ...

  5. Android 软键盘弹出，界面整体上移

    在做搜索功能的时候,点击搜索框,搜索框获取焦点,键盘弹出:现在问题出来了,android软键盘弹出的时候,android整个界面上移,布局被挤压,很难看:要解决这个问题,我们需要用到 windowSo ...

  6. 【起航计划 035】2015 起航计划 Android APIDemo的魔鬼步伐 34 App->Service->Local Service Controller

    Local Service Controller 是将LocalService当作“Started”Service来使用,相对于”Bound” Service 来说,这种模式用法要简单得多,Local ...

  7. IOS Google语音识别更新啦！！！

      旧版本的API:   —Google提供了一个在线语音识别的API接口,通过该API可以进行中文.英文等语言的识别.  API地址:http://www.google.com/speech-api ...

  8. Vbox安装CentOS7及网络配置

    安装CentOS7及网络配置 Vbox和其他虚拟机一样,安装完成一个虚拟机,需要配置网络才能实现物理主机和虚拟机之间的访问.虚拟主机和Internet(外网)的访问 1.设置Vbox全局网络 单击主界 ...

  9. 最新一道面試題目，input: int[1,1,2,2,2,3,3,3]，output [3,2,1]，要求按照數字出現的次數從多到少排列元素。

    面試當時沒有及時答出來,感覺當時在面試官的提示下跑偏了.想用兩個數組來mapping key和value然後對等排序,但是因為面試官讓用Array.sort而沒想好有什麼好辦法,結果可想而知.但是題目 ...

  10. 本地数据库(sql server)插入一条新数据时，同步到服务器数据库

    之前有个同学问我,本地数据库插入新数据时怎么同步到服务器上,当时我先想到是程序逻辑控制,作相应的处理. 但有时候我们程序不太好处理,那能不能从数据库入手呢,数据库不是有触发器(Trigger)吗,应该 ...