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. html-标题标签、水平线标签和特殊字符

    标题标签  <h1></h1> <h2></h2> ...... <h6></h6> 从h1到h6,大小是依次变小,同时会自动换 ...

  2. scss-算术运算符

    由于scss具有编程语言的特点,那么运算符是必不可少的. 下面就通过代码实例分别做一下介绍. 一.赋值运算符: 赋值运算符就是我们最为熟悉的冒号(:),用来给声明的变量赋值. 代码实例如下: $hig ...

  3. html网页访问WebAPI中的方法遇到的问题

      1.移动端访问远程服务时,建议使用WebAPI 2.用不同浏览器访问WebAPI时返回的文本格式是不同的,Chrome Firefox将在浏览器中以XML形式显示此列表,IE浏览器将获得Json格 ...

  4. C# 取整问题

    关于C#里的取整问题,有向上和向下两种取整方式[1]向上取整a=1.2345string res = Math.Ceiling(Convert.ToDecimal(a)).ToString();str ...

  5. ubuntu 火狐浏览器中常规方法安装flashplayer的问题

    之前在网上看到很多朋友介绍了许多如何在ubuntu安装flashplayer 的方法!但是我的操作系统不知怎么的就是不能成功的安装!使我十分的苦恼!但是在我纲要邪气的时候再网上又看到一位朋友的解决方案 ...

  6. how to determint wether two column equals

    question: How to determint  wether two column equals? Answer: Table one:RecordId = 1,CommonId = 5,Ap ...

  7. 团队合作之Scrum

    CCSU小助手 一:开发团队简介 队名:瓜队 组员:钟文兴.周畅.吉刘磊.唐仲勋 宣言:We are a team at any time! 团队项目描述: 内容:“生活在长大”: 目标:为了方便对学 ...

  8. 日期的压缩存储daybits

    问题: 存储一个日期的序列,例如保存用户一年的登录时间序列,20140201,20130102这样两个日期,如果用INT那么需要八个字节,用STRING就更多了. 解决: 通过bit来存储一天,具体的 ...

  9. Android（java）学习笔记12：线程的状态转换图以及常见执行情况

    1. 线程的状态转换图以及常见执行情况: 2. 线程状态类型: (1)新建状态(New):新创建了一个线程对象.(2)就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start() ...

  10. 初学DLX

    前言 \(DLX\),全称\(Dancing\ Links\ X\),即舞蹈链算法. 这是一个十分高效且实用的算法,它主要用于求出精确覆盖问题的一组解.(貌似重复覆盖问题也可以,但我不会\(2333\ ...