使用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. python 爬虫练习

    bs去除特定标签. # url import easygui as g import urllib.request from bs4 import BeautifulSoup import os im ...

  2. php程序调试方法

    可以参考鸟哥等人写的的"php调试技术手册.pdf" 主要分为内置api调试包括:echo.var_dump.print_f,error_log等 前端浏览器插件辅助调试 开源扩展 ...

  3. umi怎么去添加配置式路由

    今天在学习umi,他的路由机制非常的方便,但是在学到配置式路由的时候,看官方文档里面一笔带过: 对于我这种小萌新来说,有点懵,我需要把配置文件放到哪里呢?经过一番研究,发现它是放在根目录的.umirc ...

  4. apache2.2服务无法启动 发生服务特定错误:1 的解决办法 （windows服务错误 日志查看方法）

    转 https://blog.csdn.net/liuensong/article/details/6738041 查错过程: 1.查看apache错误日志:目录下的apache/logs/error ...

  5. gitlab图形化使用教程 （mtm推荐）

    原文:http://www.restran.net/2016/02/23/git-and-gitlab-guide/?utm_source=tuicool&utm_medium=referra ...

  6. js - 移动端的超出滚动功能，附带滚动条，可解决弹层中滚动穿透问题。

    背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchm ...

  7. Spark LogisticRegression 逻辑回归之建模

    导入包 import org.apache.spark.sql.SparkSession import org.apache.spark.sql.Dataset import org.apache.s ...

  8. Git版本控制工具的简单使用

    1.下载gitd客户端,注册github账号. 2.本地生成公钥和私钥,并将公钥粘贴到github上,测试连接. 3.先pull,从远程服务器中下载项目文件,然后再pushi,提交至服务器. 4. g ...

  9. Python与金融量化分析----金融与量化投资

    一:金融了解 金融:就是对现有资源进行重新的整合之后,进行价值和利润的等效流通. 金融工具: 股票 期货 黄金 外汇 基金 ............. 股票: 股票是股份公司发给出资人多的一种凭证,股 ...

  10. sqlServer自动代码提示功能

    第一种方法: 首先确认 自己的sqlServer2008自身的提示功能有没有被屏蔽了! 打开sqlserver2008 -- 工具 -- 选项 -- 文本编辑器 -- 所有语言 --  勾选 语句结束 ...