1.安装 npm i vue-preview -S
2.如果使用vue-cli生成的项目,需要修改webpack.base.conf.js文件中的loaders,添加一个loader
{
test:/vue-preview.src.*?js$/,
loader:'babel'
}

3.导入:import VuePreview from 'vue-preview'

使用: Vue.use(VuePreview)

<div class="thumbs">
<img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">
</div>

注意:img标签上的class="preview-img" 不能去掉,图片要设置宽和高

vue-preview使用的更多相关文章

  1. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  2. 04-Vue入门系列之Vue事件处理

    4.1. 监听事件的Vue处理 Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件.Vue提供的指令进行绑定也是非常方便,而且能让ViewModel更简洁,逻辑更彻 ...

  3. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

  4. Vue.js入门系列(一)

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  5. Vue入门(二)之数据绑定

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  6. Vue入门系列(三)之Vue列表渲染及条件渲染实战

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  7. Vue入门系列(四)之Vue事件处理

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  8. Vue入门系列(五)Vue实例详解与生命周期

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  9. [转]vue数据绑定(数据,样式,事件)

    1.mounted 与 methods 与 computed 与 watched区别 From:https://blog.csdn.net/qinlulucsdn/article/details/80 ...

  10. 【vue】跟着老马学习vue-数据双向绑定

    学习了node.js教程,只能说是有了一定的了解,之前也了解了webpack和es6的核心内容,也看过vue2.0的官网教程,并结合视频看过项目,但是理解和运用仍然存在很多问题,接下来的一段时间,跟着 ...

随机推荐

  1. 微信JSSDK支付接口-安卓机无法正常调起接口

    今天碰到个问题,是项目调起微信支付接口,苹果机都没有什么问题,但是安卓机的情况就是支付接口出现一下就消失了 试了将error反馈信息弹出来,也就是显示choosewxpay fail 找了半天不知道什 ...

  2. No.2 PyQt学习

    新增加了状态栏.菜单栏和工具栏,界面如下: 代码如下: # -*- coding: utf-8 -*- import sys from PyQt4 import QtGui, QtCore class ...

  3. 【cs229-Lecture10】特征选择

    本节课要点: VC维: 模型选择算法 特征选择 vc维:个人还是不太理解.个人的感觉就是为核函数做理论依据,低维线性不可分时,映射到高维就可分,那么映射到多高呢?我把可分理解为“打散”. 参考的资料: ...

  4. ActiveMQ 消息持久化到数据库(Mysql、SQL Server、Oracle、DB2等)

    ActiveMQ具体就不介绍了,直接介绍如何讲ActiveMQ持久化到本地数据库,以SQL Server 2008 R2为例1.下载ActiveMQ后直接解压,我下载的是apache-activemq ...

  5. Linux 开启VNCSERVER

    尽管我们可以使用 SSH连接远程通过字符界面来操作Linux,但是对于更多熟悉图形人来说是很不方便的,因此开启Linux的远程桌面还是很有必要的.目前有两种比较流 行的方式:XDM(X display ...

  6. 墨菲定律:当你觉得一个地方可能有bug,那么这个地方就会有bug----顺带了解下Tomcat那少有人注意的localhost.log

    一.问题概述 题目有点长,但应该值得后端java们了解下有点小坑的localhost.log,让我长话短说. 博主是搞java后端的.后台是很简单的spring mvc + spring框架. 今天测 ...

  7. mysql innodb存储引擎优化

    innodb_data_home_dir 这是InnoDB表的目录共用设置.如果没有在 my.cnf 进行设置,InnoDB 将使用mysql的datadir目录为缺省目录.如果设定一个空字串,可以i ...

  8. 一个不错的工具推荐:JMeter

    在开发中可能会遇到一些场景需要对程序的性能,并发能力等进行度量,就是对一些程序的性能进行度量,生成一些报告等,最近遇到了一个不错的工具 apache JMeter,它是用java的swing开发的,功 ...

  9. .net C#中页面之间传值传参的六种方法

    1.QueryString是一种非常简单的传值方式,他可以将传送的值显示在浏览器的地址栏中.如果是传递一个或多个安全性要求不高或是结构简单的数值时,可以使用这个方法.但是对于传递数组或对象的话,就不能 ...

  10. memcached stats 命令

    STAT pid 1552 STAT uptime 3792 STAT time 1262517674 STAT version 1.2.6 STAT pointer_size 32 STAT cur ...