使用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. fiddler配置手机抓包

    参考:https://blog.csdn.net/gld824125233/article/details/52588275 注:我内部用,没有https,不用配置https证书.

  2. MySQL 之【视图】【触发器】【存储过程】【函数】【事物】【数据库锁】【数据库备份】

    1.视图 视图:是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据 视图有如下特点;  1. 视图的列可以来自不同的表,是表的抽象和逻辑意义上建立的新关系.  2. 视 ...

  3. springMVC 复选框带有选择项记忆功能的处理

    前言:由于jsp管理页面经常会遇到复选框提交到JAVA后台,后台处理逻辑完成后又返回到jsp页面,此时需要记住jsp页面提交时复选框的选择状态,故编写此功能! 一.复选框的初始化 1.1.jsp页面 ...

  4. background-color没有none值

    在工作中发现, 这样是没反应的, 要写这个样式才能去掉背景颜色(background-color:transparent;)

  5. window.history.go(-1)返回且刷新页面 点击返回上一层

    windows窗口对象(历史)history.go(),history.back(),history.forward(). 因为windows对象引用不是必须的.所以windows.history.g ...

  6. 会话管理之AbpSession

    一.AbpSession的认识 在ABP中提供了IAbpSession的接口用来获取用户和租户的信息,没有使用Asp.Net中的Session,那么AbpSession到底和Session有没有关系? ...

  7. PAT甲级1055 The World's Richest【排序】

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805421066272768 题意: 给定n个人的名字,年龄和身价. ...

  8. imu内参标定

    https://medium.com/@tomas789/iphone-calibration-camera-imu-and-kalibr-33b8645fb0aa how kalibr model ...

  9. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...

  10. seaborn画热力图注意的几点问题

    最近在使用注意力机制实现文本分类,我们需要观察每一个样本中,模型的重心放在哪里了,就是观察到权重最大的token.这时我们需要使用热力图进行可视化. 我这里用到:seaborn seaborn.hea ...