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使用的更多相关文章
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- 04-Vue入门系列之Vue事件处理
4.1. 监听事件的Vue处理 Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件.Vue提供的指令进行绑定也是非常方便,而且能让ViewModel更简洁,逻辑更彻 ...
- 03-Vue入门系列之Vue列表渲染及条件渲染实战
3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
- Vue.js入门系列(一)
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue入门(二)之数据绑定
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue入门系列(三)之Vue列表渲染及条件渲染实战
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue入门系列(四)之Vue事件处理
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue入门系列(五)Vue实例详解与生命周期
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- [转]vue数据绑定(数据,样式,事件)
1.mounted 与 methods 与 computed 与 watched区别 From:https://blog.csdn.net/qinlulucsdn/article/details/80 ...
- 【vue】跟着老马学习vue-数据双向绑定
学习了node.js教程,只能说是有了一定的了解,之前也了解了webpack和es6的核心内容,也看过vue2.0的官网教程,并结合视频看过项目,但是理解和运用仍然存在很多问题,接下来的一段时间,跟着 ...
随机推荐
- GDI+ gif文件的显示和格式转换
GDI+ gif文件的显示和格式转换 gdi+imagedeletenulltiff GDI+ gif文件的显示和格式转换 怎么获取gif文件的每一帧,并且显示出来呢? 1.怎么用gid+显示gi ...
- delphi 函数参数传递 默认参数(传值)、var(传址)、out(输出)、const(常数)四类
参数可以分为: 默认参数(传值).var(传址).out(输出).const(常数)四类 {默认参数是传值, 不会被改变} function MyF1(x: Integer): Integer; be ...
- Ajax技术(WEB无刷新提交数据)
(转自:http://www.jb51.net/article/291.htm) Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器 ...
- android 线程间的通信
(转自:http://www.cnblogs.com/allin/archive/2010/05/19/1738800.html) andriod提供了 Handler 和 Looper 来满足线程间 ...
- linux常用命令大全3--rpm安装软件
RPM 包 - (Fedora, Redhat,CentOS及类似系统) rpm -ivh package.rpm 安装一个rpm包 rpm -ivh --nodeeps package.rpm 安装 ...
- 配置Mac漂亮的Shell--Iterm2+OhMyZSH+Agnoster
安装包管理器 首先当然是解决包管理的问题,Mac下面是Homebrew的天下了 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubuserco ...
- 上传控件---淘宝kissy uploader+瀑布流显示
介绍Uploader : Uploader 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性. Uploader是非 ...
- howdoi 简单分析
对howdoi的一个简单分析. 曾经看到过下面的这样一段js代码: try{ doSth(); } catch (e){ ask_url = "https://stackoverflow.c ...
- Sass::SyntaxError related to active_admin/mixins
in active_admin.css.sass, change: @import "active_admin/mixins"; @import "active_admi ...
- 【CF725G】Messages on a Tree 树链剖分+线段树
[CF725G]Messages on a Tree 题意:给你一棵n+1个节点的树,0号节点是树根,在编号为1到n的节点上各有一只跳蚤,0号节点是跳蚤国王.现在一些跳蚤要给跳蚤国王发信息.具体的信息 ...