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菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
随机推荐
- C# HashTable 使用用法详解
C#中如何操作HashTable类呢?本文将给你答案,哈希表(Hashtable)简述在.NET Framework中, 一,Hashtable是System.Collections命名空间提供的一个 ...
- （三）HTML中的列表标签、框架集及表单标签
一.HTML的列表标签 在网页中,经常可以看到,有的内容排列如同word里面的项目编号,这就是HTML的无序排列和有序排列起到的作用.. HTML之无序排列:<ul></ul> ...
- etcd单机集群
etcd在单机部署集群,可以先弄清楚配置文件参数的意思.起3个集成监听不同的端口号 1. 启动 在/etc/soft/etcd/node1文件夹中,创建脚本start1.sh etcd --name ...
- Python爬虫之图片懒加载技术、selenium和PhantomJS
一.引入 2.概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 3.回顾 验证码处理流程 一.今日详情 动态数据加载处理 1.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素 ...
- c++sizeof大全
sizeof,一个其貌不扬的家伙,引无数菜鸟竟折腰,小虾我当初也没少犯迷糊,秉着“辛苦我一个,幸福千万人”的伟大思想,我决定将其尽可能详细的总结一下.但当我总结的时候才发现,这个问题既可以简单,又可以 ...
- 设备信息工具pv-jd快速上手
pv-jd 这是一个判断设备信息的小工具,可以判断出移动端还是PC端,提供了多种API 快速开始 安装npm install pv-jd -S 示例 import {judgeDevice, judg ...
- libcurl 中使用curl_multi_perform()函数执行订阅类型url的问题
前提概要 当需要同时处理多个url时,可采用curl_multi_perform方式执行,如下代码1: //初始化一个multi curl 对象 CURLM * curl_m = curl_multi ...
- NetBeans 仿notepad++风格
一直喜欢notepad++配色跟Courier New字体.但notepad++毕竟功能有限. 改用了NetBeans,调整了下样式,终于感觉看着舒服了. 下载链接:点击下载,配置里导入就OK 风格截 ...
- selenium(2.4.0)中不能导出web drive 代码
最近在学习selenium.要做web自动化测试.咱只会C# .就想了,这个测试用例要是能用C# 控制,保存起来,就可以以后自动运行了,不用每次点击运行了. 看了看它的文档,就开始试验了,录脚本折腾了 ...
- ubuntu下go开发环境
https://qiita.com/necomeshi/items/676ccb669d6e6102117b 安装 https://golang.org/dl/ # 下载&解压 axel -n ...