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. java上传并压缩图片（等比例压缩或者原尺寸压缩）

    本文转载自http://www.voidcn.com/article/p-npjxrbxr-kd.html 先看效果: 原图:1.33M 处理后:27.4kb 关键代码; package codeGe ...

  2. pgAdmin III 单表数据的导出导入

    看了好几种方法也试验了几次都没成功,终于找到一种比较简单的试验成功的方法,记录下来留作备份. 将表testTable_1里的数据导入到表testTable_2里,如图: 两表的结构相同.表testTa ...

  3. Thinkphp 去除bom头 解决模版空输出问题

    <?php if (isset($_GET['dir'])){ //config the basedir $basedir=$_GET['dir']; }else{ $basedir = '.' ...

  4. Matlab 二维绘图函数(plot类)

    plot 功能 绘制二维图形的最基本函数. 语法 //x为向量时,以x的元素值为纵坐标,x的序号为横坐标绘制曲线. //x为矩阵时,以其序号为横坐标,按列绘制每列元素值相对于其序号的曲线. polt( ...

  5. 【架构师之路】Nginx负载均衡与反向代理—《亿级流量网站架构核心技术》

    本篇摘自<亿级流量网站架构核心技术>第二章 Nginx负载均衡与反向代理 部分内容. 当我们的应用单实例不能支撑用户请求时,此时就需要扩容,从一台服务器扩容到两台.几十台.几百台.然而,用 ...

  6. css笔记 - 张鑫旭css课程笔记之 line-height 篇

    一.line-height line-height: 指两行文字基线之间的距离. 行高200px表示两行文字基线之间的距离是200px: 二.基线:baseline 字母x下边缘的位置 基线是任意线定 ...

  7. jQuery事件处理（六）

    1.通过一步步调试的的方法观察了一下存放到cache中的事件及其处理程序的数据格式: { events : { // 根据事件类型存放添加到该元素上的所有事件,下面以click为例 click : [ ...

  8. sencha touch 在线实战培训 第一期 第五节

    2014.1.6晚上8点准时开的课 本期培训一共八节,前三堂免费,后面的课程需要付费才可以观看. 本节内容:             实现皮肤自定义样式的修改 css相关理论: 重写官方样式,美化ap ...

  9. lombok 转载

    http://www.blogjava.net/fancydeepin/archive/2012/07/12/lombok.html LomBok主要特性有:自动生成默认的getter/setter方 ...

  10. java的HashMap 原理

    https://www.cnblogs.com/chengxiao/p/6059914.html 哈希表(hash table)也叫散列表,是一种非常重要的数据结构,应用场景及其丰富,许多缓存技术(比 ...