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 相关文章推荐
jquery validation插件表单验证的一个例子
Mar 03 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
Vue组件的使用教程详解
Jan 05 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 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
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
机械专业毕业生自荐信
2013/11/02 职场文书
社区庆中秋节活动方案
2014/02/07 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
优秀实习生感言
2014/03/01 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
2014年妇女工作总结
2014/12/06 职场文书
党员转正大会主持词
2015/07/02 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers