Vue实现点击显示不同图片的效果
更新时间：2019年08月10日 08:50:40 作者：潔19
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中v-model双向绑定input输入框问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vant 自定义 van-dropdown-item的用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
Vue-admin-template 报Uncaught (in promise) error问题及解决
这篇文章主要介绍了Vue-admin-template 报Uncaught (in promise) error问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue中template模板编译的过程全面剖析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
详解vuejs中执行npm run dev出现页面cannot GET/问题
这篇文章主要介绍了详解vuejs中执行npm run dev出现页面cannot GET/问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
本节介绍双向数据绑定以及响应式的原理，回答了双向数据绑定和数据响应式是否相同，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-08-08
Vue拖拽组件(Draggable)是一个允许与View-Model同步进行拖放排序的Vue组件,下面这篇文章主要给大家介绍了关于Vue.Draggable使用文档的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
今天给大家分享的是，如何在最短的时候内实现右键菜单。高效实现需求，避免重复造轮子。感兴趣的可以了解一下2021-10-10
本文主要介绍了el-date-picker日期范围限制的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
本文分步骤给大家介绍了基于vue cli重构多页面脚手架过程，非常不错，具有参考借鉴价值，需要的朋友参考下2018-01-01
最新评论