<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/vue.js"></script>
<script src="../../lib/axios.js"></script>
</head>
<style>
.item {
overflow: hidden;
padding: 10px;
width: 400px;
border: 1px solid red;
}
.item img {
width: 100px;
float: left;
}
.film {
border: 1px solid black;
height: 1500px;
}
.filminfo {
width: 300px;
min-height: 200px;
background: yellow;
position: fixed;
right: 50px;
top: 100px;
border: 1px solid blue;
}
</style>
<body>
<div id="app">
<button @click="handleAjax">ajax </button>
<film-item v-for="data in datalist" :key="data.filmId" :item="data" @myevent="handleEvent"></film-item>
<film-detail :info="info"></film-detail>
</div>
<script>
Vue.component("filmDetail",{
template:`
<div class="filminfo">
{{info}}
</div>
`,
props:["info"]
}),
Vue.component("filmItem", {
props: ["item"],
template: `
<div class="item"> <img :src="item.poster">{{item.name}}
<button @click="handliclick()">詳情</button>
</div>
`,
methods: {
handliclick(data) {
this.$emit("myevent",this.item.synopsis)
}
}
})
new Vue({
el: "#app",
data: {
datalist: [],
info:""
},
methods: {
//http://192.168.0.105/wj1/2021/vue/vue2/html/04%E7%BB%84%E4%BB%B6/%E4%B8%AD%E9%97%B4%E4%BA%BA%E6%A8%A1%E5%BC%8F.html
handleAjax() {
axios.get("http://192.168.0.105/wj1/2021/vue/vue2/html/04%E7%BB%84%E4%BB%B6/test.json")
.then(res => {
this.datalist = res.data.data.films
})
},
handleEvent(info){
console.log("子傳父",info);
this.info=info
}
}
});
</script>
</body>
</html>
json
{
"status": 0,
"data": {
"films": [{
"filmId": 4645,
"name": "尺八·一聲一世",
"poster": "https://pic.maizuo.com/usr/movie/c24fc5d02fa8df65456ee2a54d677e59.jpg",
"actors": [{
"name": "聿馨 ",
"role": "導演",
"avatarAddress": "https://pic.maizuo.com/usr/movie/c069afb64958d8eb1cbb57d822f5dbcb.jpg"
}, {
"name": "佐藤康夫",
"role": " 自己",
"avatarAddress": "https://pic.maizuo.com/usr/movie/f74cc4cacecf974cde84b51e86413471.jpg"
}, {
"name": "小湊昭尚",
"role": " 自己",
"avatarAddress": "https://pic.maizuo.com/usr/movie/c7625ccc266ba4dc305e8f27d257044c.jpg"
}],
"director": "聿馨",
"category": "紀錄片",
"synopsis": "本片通過記錄中國，日本，美國等地的尺八演奏家，制管師，學習者的生活，去見證在尺八之路上行走着的人們，通過他們不同階段的經歷與思考，折射出來古老的尺八在當下的困境與希望，也通過尺八去映照出每個人對生活，生命，世界的認知與感悟。 尺八，由竹子根部製成的管狀樂器，因管長一尺八寸得名。尺八源於中國，在南宋時期傳至日本發展至今，成爲日本傳統樂器的代表；而在中國，尺八卻日漸式微。20世紀末期，隨着中日民間的文化交流活動的增加，尺八重新回到中國人的視野。",
"filmType": {
"name": "2D",
"value": 1
},
"nation": "中國大陸",
"language": "漢語普通話 日語 ",
"videoId": "",
"premiereAt": 1556668800,
"timeType": 2,
"runtime": 90,
"grade": "7.1",
"item": {
"name": "2D",
"type": 1
},
"isPresale": true,
"isSale": false
}, {
"filmId": 4366,
"name": "大鬧西遊",
"poster": "https://pic.maizuo.com/usr/movie/92c2f2c4348d5978c2160c75dfd94198.jpg",
"actors": [{
"name": "孫曄",
"role": "孫悟空",
"avatarAddress": "https://pic.maizuo.com/usr/movie/53d5b2b8a2b36b923a9342ca2ad3d0ed.jpg"
}, {
"name": "劉北辰",
"role": "牛魔王",
"avatarAddress": "https://pic.maizuo.com/usr/movie/3ba4faa6ece32b59f53e122c0583f7c2.jpg"
}, {
"name": "沈達威",
"role": "孫伍元",
"avatarAddress": "https://pic.maizuo.com/usr/movie/8315006945affc3507e8434a1cef9b67.jpg"
}, {
"name": "陶典",
"role": "琪琪",
"avatarAddress": "https://pic.maizuo.com/usr/movie/e28d5978f53af6d4260be265da3e71cc.jpg"
}],
"director": "馬系海",
"category": "喜劇|動畫|冒險",
"synopsis": "玩具孫五元自認是美猴王，卻因拿不出金箍棒在玩具世界飽受嘲笑。機緣巧合之下，孫五元隻身一人進入了西遊世界，並偶遇被趕回花果山的孫悟空。一心想要金箍棒的孫五元死纏爛打，孫悟空無奈提出條件：孫五元要拜其爲師，學成後就把金箍棒給他。不料牛魔王暗中挑撥，唆使五元偷走了金箍棒，並將其搶走。慌忙逃回玩具世界的五元發現，世界已被牛所統治……",
"filmType": {
"name": "2D",
"value": 1
},
"nation": "中國大陸",
"language": "漢語普通話",
"videoId": "XMzc2Njk4NTIxNg==",
"premiereAt": 1537574400,
"timeType": 3,
"runtime": 100,
"grade": "7.3",
"item": {
"name": "2D",
"type": 1
},
"isPresale": true,
"isSale": false
}, {
"filmId": 4836,
"name": "緊急救援",
"poster": "https://pic.maizuo.com/usr/movie/c14a70858e2bda9c2bc8eaa7bfa0e2aa.jpg",
"actors": [{
"name": "林超賢",
"role": "導演",
"avatarAddress": "https://pic.maizuo.com/usr/movie/45deca0f886633f1a8902f7eece4248a.jpg"
}, {
"name": "辛芷蕾",
"role": "方宇凌",
"avatarAddress": "https://pic.maizuo.com/usr/movie/ff8f5bfd455e660298452c0546bb23d5.jpg"
}, {
"name": "藍盈瑩",
"role": "演員",
"avatarAddress": "https://pic.maizuo.com/usr/movie/f27b94579d10d3131b476ec6c63a2722.jpg"
}, {
"name": "彭于晏",
"role": "高謙",
"avatarAddress": "https://pic.maizuo.com/usr/movie/0a30de65731f3ddc5ce5d5915c8d9d49.jpg"
}, {
"name": "王彥霖",
"role": "趙呈",
"avatarAddress": "https://pic.maizuo.com/usr/movie/728944e292dc6e8161acd7d5344d361c.jpg"
}],
"director": "林超賢",
"category": "劇情|災難",
"synopsis": "《緊急救援》是由林超賢導演，彭于晏、王彥霖、辛芷蕾、藍盈瑩出演的中國首部海上救援打撈題材的作品。籌備過程中，導演林超賢帶領團隊實地勘察選址，力求打造更勁爆，更震撼的場景設置，本次與奧斯卡最佳攝影鮑德熹，《泰坦尼克號》美術指導Martin Laing等國際頂級製作團隊的強強聯合，預示着電影將成爲首部打開國際市場的華語救援題材作品，也勢必會成爲又一部華語電影的標杆之作。",
"filmType": {
"name": "2D",
"value": 1
},
"nation": "中國大陸",
"language": "漢語普通話",
"videoId": "XNDIyODM2NjE4OA==",
"premiereAt": 1579910400,
"timeType": 3,
"runtime": 100,
"grade": "7.8",
"item": {
"name": "2D",
"type": 1
},
"isPresale": true,
"isSale": false
}, {
"filmId": 4920,
"name": " 葉問4：完結篇",
"poster": "https://pic.maizuo.com/usr/movie/c14daaf24fc50c767f5c067f2c05316b.jpg",
"actors": [{
"name": "葉偉信",
"role": "導演",
"avatarAddress": "https://pic.maizuo.com/usr/movie/0e3ed2b5d2897d3fd2423176468ffce9.jpg"
}, {
"name": "甄子丹",
"role": "演員",
"avatarAddress": "https://pic.maizuo.com/usr/movie/376e28f22c81a33c0629d6cd43364c18.jpg"
}, {
"name": "陳國坤",
"role": "演員",
"avatarAddress": "https://pic.maizuo.com/usr/movie/e7ce478afd0a9fdfe0c7c59331d9cf23.jpg"
}, {
"name": "吳樾",
"role": "演員",
"avatarAddress": "https://pic.maizuo.com/usr/movie/30da6c2351f1d46b129ca0b2fcf8b5e3.jpg"
}, {
"name": "斯科特·阿金斯",
"role": "演員",
"avatarAddress": "https://pic.maizuo.com/usr/movie/660b52b44aabd58c18866700420f0daa.jpg"
}],
"director": "葉偉信",
"category": "動作|傳記|歷史",
"synopsis": "因故來到美國唐人街的葉問，意外捲入一場當地軍方勢力與華人武館的糾紛，面對日益猖狂的民族歧視與壓迫，葉問挺身而出，在美國海軍陸戰隊軍營拼死一戰，以正宗詠春，向世界證明了中國功夫。",
"filmType": {
"name": "2D",
"value": 1
},
"nation": "中國香港",
"language": "",
"videoId": "",
"premiereAt": 1576800000,
"timeType": 3,
"runtime": 0,
"grade": "7.2",
"item": {
"name": "2D",
"type": 1
},
"isPresale": true,
"isSale": false
}, {
"filmId": 4721,
"name": "潛行者",
"poster": "https://pic.maizuo.com/usr/movie/cf0ec2b6f4136a2df2bf735551c656ae.jpg",
"actors": [{
"name": "周冠南",
"role": "導演",
"avatarAddress": "https://pic.maizuo.com/usr/movie/a938a313359ccf3e246ee934e72b621b.jpg"
}, {
"name": "譚廣源",
"role": "導演",
"avatarAddress": "https://pic.maizuo.com/usr/movie/3674f211be7a816037753e1e0f812f0e.jpg"
}, {
"name": "安志傑",
"role": "夏乾坤",
"avatarAddress": "https://pic.maizuo.com/usr/movie/21066fde666c937526423036e08f024b.jpg"
}, {
"name": "吳建豪",
"role": "侯虎",
"avatarAddress": "https://pic.maizuo.com/usr/movie/33c65372b4d87d92a8c514629b11d0a9.jpg"
}, {
"name": "伍允龍",
"role": "小伍",
"avatarAddress": "https://pic.maizuo.com/usr/movie/43dc266fa6bafe6dc185317fc479fd10.jpg"
}],
"director": "呂冠南 譚廣源",
"category": "動作|犯罪|喜劇",
"synopsis": "故事開始於臥底警察潛伏黑幫，意外的坐上了黑幫老大的位置，不料被大毒梟設計一步步拖入公海的魔鬼運輸船；恰逢此時，一支神祕的第三方部隊正在展開他們的復仇計劃，命運的糾葛從此開始。在三方力量的角逐中，激烈的搏鬥、刀戰、槍戰、狙擊戰、遙控炸彈，層層升級步步驚心。在法與情，愛與恨，兄弟和女人之間，有些事情總要有人去做。",
"filmType": {
"name": "2D",
"value": 1
},
"nation": "中國大陸 中國香港",
"language": "漢語普通話",
"videoId": "",
"premiereAt": 1561680000,
"timeType": 3,
"runtime": 90,
"grade": "7.1",
"item": {
"name": "2D",
"type": 1
},
"isPresale": true,
"isSale": false
}, {
"filmId": 4991,
"name": "誤殺",
"poster": "https://pic.maizuo.com/usr/movie/cab3e17b2d0e7731e04c6e76c0e2866f.jpg",
"actors": [{
"name": "柯汶利",
"role": "導演",
"avatarAddress": "https://pic.maizuo.com/usr/movie/c09f29d99ee228ee2ff9f6643412f53b.jpg"
}, {
"name": "肖央",
"role": "李維傑",
"avatarAddress": "https://pic.maizuo.com/usr/movie/3ce5eeb8f056391d655c2d0a6ec35675.jpg"
}, {
"name": "譚卓",
"role": "阿玉",
"avatarAddress": "https://pic.maizuo.com/usr/movie/91384e9861e3cc355394fd119fd656d0.jpg"
}, {
"name": "陳沖",
"role": "拉韞",
"avatarAddress": "https://pic.maizuo.com/usr/movie/c83f0f3160cc9dae2f1c927b0ebd32dc.jpg"
}, {
"name": "姜皓文",
"role": "都彭",
"avatarAddress": "https://pic.maizuo.com/usr/movie/81da96af324b1b95074fce77f3162d6a.jpg"
}],
"director": "柯汶利",
"category": "劇情|犯罪",
"synopsis": "李維傑（肖央 飾）與妻子阿玉（譚卓 飾）打拼多年，膝下育有兩個女兒。一個雨夜，一場意外，打破了這個家庭的寧靜。而李維傑作爲一個父親，爲了保全自己的家人，他不顧一切地決定瞞天過海……",
"filmType": {
"name": "2D",
"value": 1
},
"nation": "中國大陸",
"language": "",
"videoId": "",
"premiereAt": 1576195200,
"timeType": 3,
"runtime": 112,
"grade": "7.9",
"item": {
"name": "2D",
"type": 1
},
"isPresale": true,
"isSale": false
}, {
"filmId": 5033,
"name": "滅絕",
"poster": "https://pic.maizuo.com/usr/movie/f65323cc17100fea4e8d08c5b52dc618.jpg",
"actors": [{
"name": "麗茲·卡潘",
"role": "Alice",
"avatarAddress": "https://pic.maizuo.com/usr/movie/9a6e7a23ef4a63e66a5f41e406a11c95.jpg"
}, {
"name": "艾瑪·布斯",
"role": "Samantha",
"avatarAddress": "https://pic.maizuo.com/usr/movie/7704ccd5558637ec8c6fd9451be9ef67.jpg"
}, {
"name": "本·楊格爾",
"role": "導演",
"avatarAddress": "https://pic.maizuo.com/usr/movie/c81f7952c1b3697f7e6791fe541e4278.jpg"
}, {
"name": "本·揚",
"role": "導演",
"avatarAddress": "https://pic.maizuo.com/usr/movie/74a96ea36f628fb618441281661c29bb.jpg"
}, {
"name": "邁克爾·佩納",
"role": "Peter",
"avatarAddress": "https://pic.maizuo.com/usr/movie/2750cc6cde9af1cc0bca2865d7bb2a83.jpg"
}],
"director": "本·楊格爾|本·揚",
"category": "科幻|驚悚|懸疑",
"synopsis": "麗茲·卡潘([驚天魔盜團2])將加盟科幻新片[滅絕]，該片將由本·楊執導，[降臨]的編劇埃裏克·海瑟爾負責撰寫劇本。邁克爾·佩納([警戒結束])將擔任該片男主角，片中他是一個經常夢到失去家庭的人。麗茲·卡潘在電影中出演佩納的妻子，他們將一同在外星生物入侵時保護自己的家庭。",
"filmType": {
"name": "2D",
"value": 1
},
"nation": "美國",
"language": "",
"videoId": "",
"premiereAt": 1579305600,
"timeType": 3,
"runtime": 95,
"grade": "7",
"item": {
"name": "2D",
"type": 1
},
"isPresale": true,
"isSale": false
}],
"total": 7
},
"msg": "ok"
}