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. 【LeetCode OJ】Remove Element

    题目:Given an array and a value, remove all instances of that value in place and return the new length ...

  2. PHP array_merge 隐藏坑。。

    foreach ($list as $k=> $teamGoods){ if($teamGoods['status'] > 4){ $_soldGoods[] = $teamGoods; ...

  3. <转>pandas学习

    1.Pandas 基本介绍 Numpy 和 Pandas 有什么不同? 如果用 python 的列表和字典来作比较, 那么可以说 Numpy 是列表形式的,没有数值标签,而 Pandas 就是字典形式 ...

  4. 【ipad神坑】ipad麦克风听不到声音怎么回事 微信QQ语音视频对方都听不到

    今天遇到了这个问题 说话听不见,但是敲击ipad,可以明显的听到击打的声音 siri也是可以听到 上网上找,大多都是说恢复设置,重启,隐私麦克风权限等解决方案 都是浪费感情 全部尝试过了,依然没有用. ...

  5. WP8.1学习系列(第七章)——应用选项卡Pivot交互UX

    “应用选项卡”模式用于用户经常在中间导航的多个 UI 页面.如果你的应用基于单个主题(例如,电影.棒球等),该模式尤其有用.每页都将为用户显示与该应用呈现的整体数据相关的一些内容.“应用选项卡”模式可 ...

  6. xmapp 404设置

    这样做的好处一个是很友好,另一个是对于你的网站会更安全些,如果没设置,别人在你的网址后随便输入一个路径,会显示404错误,并且会显示你的服务器版本号,服务器配置一目了然,为了避免这种情况,可以设置错误 ...

  7. phpstorm10激活加汉化

    所用到的文件:链接:http://pan.baidu.com/s/1boNqCcJ 密码:61nz 分享文件夹中,有一个“PHP Storm激活和汉化方法.zip”文件其中有一个“resources_ ...

  8. CF 434C Tachibana Kanade's Tofu[数位dp+AC自动机]

    Solution //本代码压掉后两维 #include<cstdio> #define max(a,b) (a<b?b:a) using namespace std; inline ...

  9. Struts2之命名空间与Action的三种创建方式

    看到上面的标题,相信大家已经知道我们接下来要探讨的知识了,一共两点:1.package命名空间设置:2.三种Action的创建方式.下面我们开始本篇的内容: 首先我们聊一聊命名空间的知识,namesp ...

  10. CListCtrl使用（转）

    CListCtrl使用技巧 以下未经说明,listctrl默认view 风格为report 1. CListCtrl 风格 LVS_ICON: 为每个item显示大图标      LVS_SMALLI ...