电影信息（使用父传子组件）

独屾

已于 2022-10-26 19:01:31 修改

阅读量101

点赞数

文章标签： vue.js javascript 前端

于 2022-10-26 17:37:07 首次发布

本文链接：https://blog.csdn.net/m0_69952953/article/details/127537087

版权

app.vue

<template>
  <div>
    <meituan :arr="list"></meituan>
  </div>
</template>


<script>
import meituan from './components/meituan.vue'
export default {
  components: { meituan },
  data(){
    return{
      list:[
        {id:1,img:'https://p0.pipi.cn/mmdb/25bfd65133951bd7c350c83d1c59b6c75a0cb.jpg?imageMogr2/thumbnail/2500x2500%3E',score:9.1,name:'哥，你好'},
        {id:2,img:'https://p0.pipi.cn/mmdb/25bfd6ddb53c7e5015d23c5bc24d876c03d41.jpg?imageMogr2/thumbnail/2500x2500%3E',score:9.6,name:'万里归途'},
        {id:3,img:'https://p0.pipi.cn/mmdb/25bfd6ddbe1c7ecbaec7edee785c42fbcc785.jpg?imageMogr2/thumbnail/2500x2500%3E',score:9.2,name:'独行月球'},
        {id:4,img:'https://p0.pipi.cn/mmdb/25bfd65187a923be12b8607870b84d901af50.jpg?imageMogr2/thumbnail/2500x2500%3E',score:9.3,name:'新大头儿子'},
        {id:5,img:'https://p0.pipi.cn/mmdb/25bfd6ddb53338925739ddde572ed1be162d4.jpg?imageMogr2/thumbnail/2500x2500%3E',score:9.2,name:'平凡英雄'},


      ]
    }
  }
}
</script>


<style>


</style>

meituan.vue(组件)

<template>
  <header>
    <div v-for="obj in arr" :key="obj.id" class="a">
      <img :src=obj.img >
      <div>
        <h6>观众评 <font> {{obj.score}}</font></h6>
        <p>{{obj.name}}<button class="btn btn-danger btn-sm">购票</button></p>
      </div>
    </div>
  </header>
</template>


<script>
export default {
  props:["arr"]
}
</script>


<style>


  img{
    width: 200px;
  }
  div{
    float: left;
    margin: 10px;
    position: relative;
  }
  div>div{
    left: -10px;
    width: 100%;
    position: absolute;
    bottom: -10px;
    color: pink;
    background-color: rgba(1, 1, 1, 0.5);
    
  }
  div>h6{
    
    font-size:12px;
    margin: 0;
    color: rgb(230, 217, 217);
    margin-left: 10px;
    font-weight: bold;
    
  }
  div>p{
    font-size: 15px;
    margin-bottom: 8px;
    margin-top: 2px;
    color: rgb(230, 217, 217);
    margin-left: 10px;
  }
  font{
    font-size: 15px;
    color: rgb(216, 119, 15);
    font-weight: normal;
  }


  div .btn{
    float: right;
    padding: 1px 6px 1.5px 6px;
    position: absolute;
    right: 0;
    bottom: 8px;
    font-size: 14px;
    border-radius: 100px;
  }
  .a:hover{
    transform: scale(1.05);
  }
</style>