vue实现图片路径传送
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="vm1">
<big-img></big-img>
<small-img></small-img>
</div>
<script>
var vm=new Vue();
var A={
data:function(){
return {
simg:["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"]
}
},
template:`
<div>
<img v-for="x in simg" :src="x" width="80" height="60" @click="send($event)">
</div>
`,
methods:{
send:function(e){
var Imgsrc=e.target.src;
Imgsrc=Imgsrc.substr(Imgsrc.lastIndexOf("images/"));
vm.$emit("b-img",Imgsrc)
}
}
}
var B={
template:`
<div><img :src="simg" width="500" height="400"></div>
`,
mounted(){
vm.$on("b-img",function(img){
this.simg=img;
}.bind(this))
},
data:function(){
return{
simg:"images/5.jpg"
}
}
}
new Vue({
el:"#vm1",
components:{
"big-img":A,
"small-img":B
}
})
</script>
</body>
</html>
vue实现图片路径传送的更多相关文章
- vue 关于图片路径的问题
在vue 中,当我们想加载assets中的图片,本人按照多年的开发经验会这样写,那是没问题的 <img src="../assets.1.jpg"/> 如果我要用v-b ...
- vue项目图片路径问题
一般情况下我们为了能在本地显示效果,写图片路径会直接这样写,但是在实际中图片一般都是动态上传的, 所以,在vue中一般是这样的: 但是这样你会发现,图片根本显示不出来,只是显示了个图片的图标. 后来发 ...
- vue的图片路径，和背景图片路径打包后错误解决
最近在研究vue,老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个背景图片的问题,查了很久才解决. 1 ...
- freemarker与vue使用图片路径获取问题，可双单引号一起使用则可
<el-table :data="leftPage.datas" style="width: 100%" @selection-change=" ...
- vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
- vue图片、背景图片路径问题
vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo ...
- Vue如何在data中正常引入图片路径
在Vue项目中通过data设置图片路径,然后在template中引入后页面无法显示图片,浏览器控制台报错: 刚开始以为是路径出问题了,于是绝对路径.相对路 ...
- vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
- Vue 动态设置图片路径
大多数情况vue项目中组件是需要相互引用的,父组件引用子组件,子组件引用父组件,已达到组件重用的目的 本次记录的是父组件引用子组件,img标签定义在多个子组件中,不同或相同的父组件引用同一个子 ...
随机推荐
- Jquery学习---Easy UI 框架
Jquery的easyui 1.1. easyui的目录分析 以 jquery Easy UI 1.3.2 版本学习 demo 实例 locale 国际化信息 plugins 框架一些插件 src 源 ...
- 大数据学习---大数据的学习【all】
大数据介绍 什么是大数据以及有什么特点 大数据:是指无法在一定时间内用常规软件工具对其内容进行抓取.管理和处理的数据集合. 大数据是一种方法论:“一切都被记录,一切都被数字化,从数据中寻找需求,寻找知 ...
- 获取Excel的单元格数据类型（靠谱）
VBA中,单元格属性有NumberFormat可以获取单元格格式,比如: G/通式格式→常规 @→文本 yyyy/m/d→日期 问题: G/通式格式,无法知道值是整数还是浮点数, yyyy/m/d如果 ...
- June 20th 2017 Week 25th Tuesday
Care and diligence bring luck. 谨慎和勤奋,带来好运气. In my opinion, care and diligence may just gurantee us a ...
- Alpha Scrum1
Alpha Scrum1 牛肉面不要牛肉不要面 Alpha项目冲刺(团队作业5) 各个成员在 Alpha 阶段认领的任务 林志松:音乐网页前端页面编写,博客发布 吴沂章:博客编写 林锃寒:前端页面编写 ...
- 截取Excel字符串的部分字符
截取Excel字符串的部分字符 我们可以使用Mid.Left.Right等函数从长字符串内获取一部分字符. ①LEFT函数: LEFT(text,num_chars) Text是包含要提取字符的 ...
- 阅读HandlerInterceptor接口源码的理解
一.阅读接口类注释 我先理解的方法,方法都看懂了类注释自然而然明白了.所以此处略. 二.阅读preHandle()方法注释 Intercept the execution of a handler. ...
- 在js文件中写el表达式取不到值的原因及解决方法
1.javascript是客户端执行,EL是在服务端执行,而服务端比客户端先执行,所以取不到值 2.要想获取"${jcDropClass.jcClass.id}"的值,可以在jsp ...
- HDU 6395 Sequence 【矩阵快速幂 && 暴力】
任意门:http://acm.hdu.edu.cn/showproblem.php?pid=6395 Sequence Time Limit: 4000/2000 MS (Java/Others) ...
- 1.springboot：入门项目
简介: Springboot 来简化spring应用开发,约定大于配置,去繁从简,just run 就可以创建一个独立的,产品应用 背景: J2EE笨重开发,繁多的配置,低下的开发效率,复杂的部署流程 ...