Vue实现点击显示不同图片的效果


Posted in Javascript onAugust 10, 2019

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
3种js实现string的substring方法
Nov 09 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
详解Vue单元测试case写法
May 24 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
vue+eslint+vscode配置教程
Aug 09 #Javascript
一个手写的vue放大镜效果
Aug 09 #Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 #Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 #Javascript
小程序Request的另类用法详解
Aug 09 #Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 #Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 #Javascript
You might like
基于PHP实现用户注册登录功能
2016/10/14 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
jsonp原理及使用
2013/10/28 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
jquery 手势密码插件
2017/03/17 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
通信专业个人自我鉴定
2013/10/21 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
预备党员综合考察材料
2014/05/31 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
如何在Python项目中引入日志
2021/05/31 Python
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL