<!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实现图片路径传送的更多相关文章

  1. vue 关于图片路径的问题

    在vue 中,当我们想加载assets中的图片,本人按照多年的开发经验会这样写,那是没问题的 <img src="../assets.1.jpg"/> 如果我要用v-b ...

  2. vue项目图片路径问题

    一般情况下我们为了能在本地显示效果,写图片路径会直接这样写,但是在实际中图片一般都是动态上传的, 所以,在vue中一般是这样的: 但是这样你会发现,图片根本显示不出来,只是显示了个图片的图标. 后来发 ...

  3. vue的图片路径，和背景图片路径打包后错误解决

    最近在研究vue,老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个背景图片的问题,查了很久才解决. 1 ...

  4. freemarker与vue使用图片路径获取问题，可双单引号一起使用则可

    <el-table :data="leftPage.datas" style="width: 100%"  @selection-change=" ...

  5. vue build打包后css里的图片路径404不正确的问题

    vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...

  6. vue图片、背景图片路径问题

    vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo ...

  7. Vue如何在data中正常引入图片路径

    在Vue项目中通过data设置图片路径,然后在template中引入后页面无法显示图片,浏览器控制台报错:                        刚开始以为是路径出问题了,于是绝对路径.相对路 ...

  8. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  9. Vue 动态设置图片路径

      大多数情况vue项目中组件是需要相互引用的,父组件引用子组件,子组件引用父组件,已达到组件重用的目的   本次记录的是父组件引用子组件,img标签定义在多个子组件中,不同或相同的父组件引用同一个子 ...

随机推荐

  1. 20140322 卡迪夫城VS利物浦，拔出重剑，有惊无险

    一.菱形442 起初在客战南安普顿的时候,罗杰斯启用了菱形442阵式,阵容和今天客战卡迪夫城几乎一样,只是格伦·约翰逊打左后卫,弗拉纳甘任职右后卫,目的是为了在客场抵御卢克·肖+拉拉纳.当时库蒂尼奥的 ...

  2. （转）浅谈PostgreSQL的索引

    1. 索引的特性 1.1 加快条件的检索的特性 当表数据量越来越大时查询速度会下降,在表的条件字段上使用索引,快速定位到可能满足条件的记录,不需要遍历所有记录. create table t(id i ...

  3. C++禁止使用拷贝构造函数和赋值运算符方法

    1.将拷贝构造函数和赋值运算符声明为私有,并不予实现 class Uncopyable { private: Uncopyable(const Uncopyable &); // 阻止copy ...

  4. 7.spring:SpringAOP（配置文件）

    SpringAOP(xml文件配置) 配置文件的方式,主要是在xml文件中进行配置,不使用注解! 目录: AtithmeticCalculator.java public interface Atit ...

  5. 关于接口返回BOM头处理的问题

    今天用RestClient框架做接口请求.结果请求回来的json转模型失败.提示JSON格式不正确.到BeJson网站验证一下,发现果然不对. 后来得知是由于json信息带着bom头导致的,这个该死的 ...

  6. PAT——1055. 集体照 (比较comparable和comparator的区别)

    拍集体照时队形很重要,这里对给定的N个人K排的队形设计排队规则如下: 每排人数为N/K(向下取整),多出来的人全部站在最后一排: 后排所有人的个子都不比前排任何人矮: 每排中最高者站中间(中间位置为m ...

  7. [转]表单提交：button input submit 的区别

    博客转自于   http://harttle.com/2015/08/03/form-submit.html  ,同时自己做了稍微改动 最近项目代码中的表单提交的方式已经百花齐放了,现在用这篇文章来整 ...

  8. 【题解】洛谷P3959 [NOIP2017TG] 宝藏（状压DP+DFS）

    洛谷P3959:https://www.luogu.org/problemnew/show/P3959 前言 NOIP2017时还很弱(现在也很弱 看出来是DP 但是并不会状压DP 现在看来思路并不复 ...

  9. localtunnel内网服务器暴露至公网

    摘自@scarlex   1.安装 npm install -g localtunnel 2.运行 lt --port 8080  (your url is: http://xxxx.localtun ...

  10. jQuery获取所有父级元素及同级元素及子元素的方法

    jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...