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 相关文章推荐
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
Vue 组件注册实例详解
Feb 23 Javascript
javascript实现弹幕墙效果
Nov 28 Javascript
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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
Python Mysql自动备份脚本
2008/07/14 Python
python模块restful使用方法实例
2013/12/10 Python
Python内置函数delattr的具体用法
2017/11/23 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
浅析python redis的连接及相关操作
2019/11/07 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
《灯光》教学反思
2014/02/08 职场文书
报关专员求职信范文
2014/02/22 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
免职证明样本
2014/10/23 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers