Vue实现点击显示不同图片的效果
作者：潔19 发布时间：2024-05-02 17:10:53
标签：vue,点击,图片
本文实例为大家分享了Vue点击显示不同图片的具体代码，供大家参考，具体内容如
使用Vue中的以下知识点来显示效果
①：v-for：循环遍历数据
②：v-bind:class={ }：绑定样式
③：v-on:click（简写@click）：点击事件
④：v-if：判断
<!DOCTYPE html>
<html>
<head>
<title>点击显示相对应的图片</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.myul{
display: flex;
}
.myul li{
border: 1px solid orange;
height: 150px;
width: 150px;
flex-direction: row;
text-align: center;
line-height: 150px;
}
.content{
border: 1px solid grey;
height: 350px;
width: 600px;
}
.content img{
height: 350px;
width: 600px;
}
.active{
background: #3A9ffb;
color: white;
}
</style>
</head>
<body>
<div class="app">
<div class="title">
<ul class="myul">
<li v-for="(item,index) in mess" v-bind:class="{ 'active': status === index}" v-on:click="changeImg(index)">
{{item.content}}
</li>
</ul>
</div>
<div class="content">
<img src="img/1.jpg" v-if="status === 0">
<img src="img/2.jpg" v-if="status === 1">
<img src="img/84.jpg" v-if="status === 2">
<img src="img/85.jpg" v-if="status === 3">
</div>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.js"></script>
<script type="text/javascript">
new Vue({
el:".app",
data:{
status:0, //状态显示
mess:[
{id:0,content:"点击显示图片一"},
{id:1,content:"点击显示图片二"},
{id:2,content:"点击显示图片三"},
{id:3,content:"点击显示图片四"}
]
},
methods:{
changeImg:function(index){
this.status=index;
}
}
})
</script>
来源：https://blog.csdn.net/weixin_41909712/article/details/87940238
0
投稿猜你喜欢
- 引言python中的模块、库、包有什么区别？module：一个 .py 文件就是个 modulelib：抽象概念，和另外两个不是一类，只要你
- 参考资料：正则表达式语法–菜鸟教程Java正则表达式实现简单批量替换举例：将and 批量替换为&&Python实现impor
为了更好的理解这些基本操作，下面会通过读取一个股票数据，来进行Pandas基本数据操作的语法介绍。# 读取文件（读取保存文件后面会专门进行讲- 需求每天往一个表里面插入两条数据，但日期不同INSERT INTO test(`id`, `art_training_institution
- 1069错误（由于登录失败而无法启动服务）解决方法在本版面出现这个问题的频率也算是很高的了，新手通常会比较多遇到这个问题原因很简单，安装SQ
- 1.变量命名1）命名的规范性变量名可以包括字母、数字、下划线，但是数字不能做为开头。系统关键字不能做变量名使用除了下划线之个，其它符号不能做
- 在html 5增加了新元素header、footer，测试过发现IE不能解析html 5新增的元素。代码如下：<!DOCTYPE&nb
- 想学习Python的同学们，在这里隆重介绍一款 Python 的开发工具 pyCharm IDE。这是我最喜欢的 Python编辑器利器。而
- 本文实例分析了AJAX使用get与post模式的区别。分享给大家供大家参考。具体分析如下：如果是get 模式的请求，则将传递参数通过URL
- 今天是Firefox3的2008下载日(貌似北京时间是6.18的凌晨1:00)，这就意味着Firefox3正式发布了。Firefox3有众多
- 一、密码字典所谓密码字典，主要是配合解密使用，一般情况用来暴力破解密码，是由指定字符排列组合组成的文本文件。如果知道密码设置的规律指定性生成
- optim.Adam()解读torch.optim是一个实现了多种优化算法的包，大多数通用的方法都已支持，提供了丰富的接口调用，未来更多精炼
- 一、本文使用的第三方包和工具python 3.8 谷歌浏览器selenium（3.141.0）（pip install
- 下面是列表合并的4种方法，其中的代码都在Python3下测试通过，在Python2下运行应该也没问题，时间关系就没测试，遇到问题可以联系小编
- 约定：import pandas as pdimport numpy as npReIndex重新索引reindex()是pandas对象的
- 普通卷积使用nn.Conv2d()，一般还会接上BN和ReLu参数量NNCin*Cout+Cout(如果有bias，相对来说表示对参数量影响
- 在空白的文本编辑器里打开一个崭新的文本，没有一行代码，出现在眼前的是一个充满了无限可能和希望的项目。可是，当数千行的代码写完之后，整个项目因
- 用于模式匹配的String方法：String支持4种使用正则表达式的方法：seach()用于检索，参数是一个正则表达式，返回第一个与之匹配的
- 数组go开发者在日常的工作中slice算是用的比较多的了，在介绍slice之前，我们先了解下数组，数组相信大家都不陌生，数组的数据结构比较简
- 本文实例讲述了Python面向对象程序设计之类的定义与继承。分享给大家供大家参考，具体如下：定义类：class A: def _
