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. 【Linux基础学习】Ubuntu 常用命令大全

    一.文件目录类 1.建立目录:mkdir 目录名 2.删除空目录:rmdir 目录名 3.无条件删除子目录: rm -rf 目录名 4.改变当前目录:cd 目录名 (进入用户home目录:cd ~:进 ...

  2. 【EF框架】另一个 SqlParameterCollection 中已包含 SqlParameter。

    查询报表的时候需要通过两次查询取出数据. 第一次,用count(*)查出总数: 第二次,用rownumber分页取出想要的页内容: 为了防止sql注入,使用SqlParameter来传递参数 var ...

  3. spring基础---->请求与响应的参数（一）

    这里面我们主要介绍一下spring中关于请求和响应参数数据的问题.爱,从来就是一件千回百转的事.不曾被离弃,不曾受伤害,怎懂得爱人?爱,原来是一种经历. spring中的请求与响应 一.spring中 ...

  4. 原生js--cookie操作的封装

    封装cookie的操作:查询cookie个数.查询所有cookie的键.获取cookie.设置cookie.删除cookie.清除全部cookie /** * cookieStorage */func ...

  5. jQuery队列（一）

    jQuery的队列依赖缓存机制事件,它同时是animate的基础. 它不像事件机制.缓存机制.回调机制一样有自己的命名空间,由于比较简单,所以直接挂在到$和jQuery对象上. 它提供的基础方法有: ...

  6. VLC媒体视频播放器 v3.0.2官方版

    https://www.videolan.org/    VLC media player http://www.pc6.com/softview/SoftView_52483.html    VLC ...

  7. LeetCode 30 Substring with Concatenation of All Words（确定包含所有子串的起始下标）

    题目链接: https://leetcode.com/problems/substring-with-concatenation-of-all-words/?tab=Description   在字符 ...

  8. linux mint 安装 SecureCRT

    最喜欢的ssh工具莫过于SecureCRT了,功能强大,方便易用.最近安装了mint17.1(基于ubuntu),就想安装一个SecureCRT来使用. [此SecureCRT仅作测试使用,不做商业用 ...

  9. 【转】Windows socket基础

    转自:http://blog.csdn.net/ithzhang/article/details/8448655 Windows socket 基础 Windows socket是一套在Windows ...

  10. android中SimpleCursorAdapter _id错误的问题

    作为一个android新手,在绑定数据的时候是这样的 ListView listview=(ListView)this.findViewById(R.id.listView1); XJDal xj=n ...