vue实现图片路径传送
Posted 灬晓风
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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实现图片路径传送的主要内容，如果未能解决你的问题，请参考以下文章