vue入门：实现图片点击切换
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入门：实现图片点击切换的更多相关文章
- Js实现图片点击切换与轮播
Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- JS原生隐藏显示图片,点击切换图片的效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
- 关于使用JavaScript实现图片点击切换（附带改变导航图片 方案二）
具体需求见方案一. 这种方案相比方案一更加专业. <!DOCTYPE html> <html> <head lang="en"> <met ...
- 3d图片点击切换
效果图: 代码块: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- vue实现简单的点击切换颜色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS3新增文本属性实现图片点击切换效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用DOM的方式点击切换图片及修改文字
本案例主要学习理解,用到的几个DOM方法 01.getAttribute()方法,获取元素的属性值 02.setAttribute('src',source) 方法,用后边的值修改前边这个元素的属性值 ...
- jquery——左右按钮点击切换一组图片功能
一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
随机推荐
- java字节码速查笔记
java字节码速查笔记 发表于 2018-01-27 | 阅读次数: 0 | 字数统计: | 阅读时长 ≍ 执行原理 java文件到通过编译器编译成java字节码文件(也就是.class文件) ...
- Spring入门案例 idea创建Spring项目
spring入门案例 idea创建spring项目 Spring介绍 Spring概述 Spring是一个开源框架,Spring是2003年兴起的轻量级java开发框架,由Rod Johnson 在其 ...
- OAuth2.0 入门与进阶
一.基础知识 1.OAuth产生背景 很多网站.APP 弱化甚至没有搭建自己的账号体系,而是直接使用社会化登录的方式,这样不仅免去了用户注册账号的麻烦.还可以获取用户的好友关系来增强自身的社交功能. ...
- 去掉iframe白色背景方法
在iframe内添加如下代码 style="display:none" onload="this.style.display = 'block';" 先让它不显 ...
- Android应用开发基础之一：数据存储和界面展现（一）
Android项目的目录结构 Activity:应用被打开时显示的界面 src:项目代码 R.java:项目中所有资源文件的资源id Android.jar:Android的jar包,导入此包方可使用 ...
- 生成centos7 安装脚本
[root@us-1-217 install]# cat gen7.py #!/usr/bin/env python # -*- coding: utf-8 -*- import os, crypt ...
- Struts2学习-拦截器2
1.做一个登陆页面(loginView.jsp,才用Action来访问),2.登陆成功后,可以跳转到系统的首页(index.jsp),3.首页有一个链接(testOtherAction访问其它的功能模 ...
- 小故事学设计模式之Decorate: (二)老婆的新衣服
老婆有一件蓝色的裙子和一件粉色的裙子, 不管怎么穿,她还是原来的老婆. 但是在软件里就不一定了, 如果把老婆比作一个class的话, 有一种做法是会因为增加了两个新的Property而继承出两个子类: ...
- python图片黑白化
#!/usr/bin/env python #-*- coding:utf-8 -*- from PIL import Image im = Image.open(r"C:\Users\wa ...
- Android开发经验01：31个Android开发实战经验
1. 在Android library中不能使用switch-case语句访问资源ID:在Android library中不能使用switch-case语句访问资源ID的原因分析及解决方案 2. 不能 ...