使用vue-preview做图片缩率图
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. 国内常用NTP服务器地址及

    210.72.145.44 (国家授时中心服务器IP地址) 133.100.11.8 日本 福冈大学 time-a.nist.gov 129.6.15.28 NIST, Gaithersburg, M ...

  2. 7.11js常用对象

    <!DOCTYPE html> <html> <head> <title>js常用对象</title> <script type=&q ...

  3. 现在越来越喜欢用ajax传值了，这样能让网站的体验性很好，今天就总结了一下常用的

    这是不用循环的方法 就是传过来的是一位数组 //编辑党建分类 function gk_bj(id){ $.post("{:U('Luser/lei_edlt')}",{id:id} ...

  4. bootstrap modal 弹出其他页面

    此文是可以的,是复制的然后粘贴 1.不使用js 方式 1.1 按钮 <a class=" btn default" href="ui_modals_ajax_sam ...

  5. DevOps平台的“精益创业”之路

    本文内容节选自第六届全球软件案例研究峰会,时任中国移动通信集团浙江有限公司罗琼老师,申健老师分享的<DevOps平台的“精益创业”之路>实录,重点分享:DevOps产品研发过程,对外实施敏 ...

  6. TOP100summit2017：网易云通信与视频CTO赵加雨：外力推动下系统架构的4个变化趋势

      壹佰案例:很荣幸邀请到您成为第六届壹佰案例峰会架构专场的联席主席,您曾深度参与Cisco Jabber,Webex Meeting, Cisco Spark等多项分布式实时通信类产品的架构与研发, ...

  7. 通过Jenkins在IIS上布署站点

    当需要在多台服务器的IIS上布署站点时,如果纯粹靠人工手动完成此任务的话,过于低效,而借助Jenkins之类的自动化工具,则可以极大提升工作效率. 以下便是Jenkins Pipeline所使用的脚本 ...

  8. JavaScript 引入方式 语言规范 语言基础 数据类型 常用方法 数组 if_else 比较运算符 for while 函数 函数的全局变量和局部变量 {Javascript学习}

    Javascript学习 JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript ...

  9. tensorflow如何正确加载预训练词向量

    使用预训练词向量和随机初始化词向量的差异还是挺大的,现在说一说我使用预训练词向量的流程. 一.构建本语料的词汇表,作为我的基础词汇 二.遍历该词汇表,从预训练词向量中提取出该词对应的词向量 三.初始化 ...

  10. elasticsearch ingest node and docker-cluster---quey using sql]

    es-docker-cluster https://stefanprodan.com/2016/elasticsearch-cluster-with-docker/ https://github.co ...