<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bus</title>
<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>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button @click="getInfo">ajax</button>
<movie v-for="item in movieList" :mymovie="item" :key="item.filmId"></movie>
<moviedetail></moviedetail>
</div>
<script>
var bus = new Vue();
Vue.component('movie', {
template: `
<div class="item">
<img :src="mymovie.poster"/>
<span>{
{mymovie.name}}</span>
<button @click="mvDetail()">详情</button>
</div>`,
props:["mymovie"],
methods: {
mvDetail () {
bus.$emit('Mdetail',this.mymovie.synopsis);
}
}
})
Vue.component("moviedetail",{
data () {
return {
Minfo: ''
}
},
template: `
<div class="filminfo">{
{Minfo}}</div>`,
mounted () {
bus.$on("Mdetail",(data)=>{
console.log(data);
this.Minfo = data;
})
}
})
new Vue({
el: '#app',
data: {
movieList: [],
},
methods: {
getInfo () {
fetch("test.json")
.then(res => res.json())
.then(res => {
//console.log(res.data.films);
this.movieList = res.data.films
})
},
}
})
</script>
</body>
</html>
test.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