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>
最新文章
- [WPF系列]-基础 TextBlock
- SQLite部署-无法加载 DLL“SQLite.Interop.dll”: 找不到指定的模块
- CodeForces 686B-Little Robber Girl&#39;s Zoo
- IHttpActionResult – new way of creating responses in ASP.NET Web API 2
- 【转载】Gambit使用教程
- php特殊语法--模板引擎中比较常见
- PHP 对象及其三大特性
- [POJ2398]Toy Storage(计算几何,二分,判断点在线段的哪一侧)
- Spring boot 1.3.5 RELEASE 官方文档中文翻译--Part2:新手入门
- 基于视觉的Web页面分页算法VIPS的实现源代码下载
- 日志记录Filter
- Spring IOC三种注入方式(接口注入、setter注入、构造器注入)(摘抄)
- Struts入门学习(一)
- 如何解决Reporting Services目录数据库文件存在的问题
- FreeMarker 生成Java、mybatis文件
- 通过mysqlbinlog 恢复数据
- React Native - 网页组件(WebView)的使用详解
- Kite(几何+镜面对称)
- 618大促微服务、web、redis等的超时时间
- Java知识点-判断null、空字符串和空格