Vue学习笔记 7.7 周末去哪儿

妖狐艹你老母 2022-03-01 01:16 192阅读 0赞

<template>
      <div>
        <div class="title">周末去哪儿</div>
        <ul>
          <li
            class="item border-bottom"
            v-for="item of recomendList"
            :key="item.id"
          >
            <div class="item-img-wapper">
              <img class="item-img" :src="item.imgUrl" />
            </div>
            <div class="item-info">
              <p class="item-title">{
       { item.title }}</p>
              <p class="item-desc">{
       { item.desc }}</p>
            </div>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HomeWeekend',
      data () {
        return {
          recomendList: [{
            id: '0001',
            imgUrl: 'http://img1.qunarzz.com/sight/source/1511/8f/bf3a40e4afcf29.jpg_r_640x214_90225212.jpg',
            title: '厦门娱乐万岁',
            desc: '谁说来厦门就要去鼓浪屿？其实不登鼓浪屿也有新玩法，去探寻你不知道的海底世界'
          }, {
            id: '0002',
            imgUrl: 'http://img1.qunarzz.com/sight/source/1711/15/1cdd5ee885686b.jpg_r_640x214_46768064.jpg',
            title: '厦门娱乐万岁',
            desc: '谁说来厦门就要去鼓浪屿？其实不登鼓浪屿也有新玩法，去探寻你不知道的海底世界'
          }, {
            id: '0003',
            imgUrl: 'http://img1.qunarzz.com/sight/source/1505/b3/671f666cc7845a.jpg_r_640x214_f977f30c.jpg',
            title: '厦门娱乐万岁',
            desc: '谁说来厦门就要去鼓浪屿？其实不登鼓浪屿也有新玩法，去探寻你不知道的海底世界'
          }]
        }
      }
    }
    </script>
    
    <style lang="stylus" scoped>
      @import '~styles/mixins.styl'
      .title
        margin-top: .2rem
        line-height: .8rem
        background: #eee
        text-indent: .2rem
      .item-img-wapper
        overflow: hidden
        height: 0
    // 按图片的宽高比例在设置百分比
        padding-bottom: 33.9%
        .item-img
          width: 100%
      .item-info
        padding: .1rem
        .item-title
          line-height: .54rem
          font-size: .32rem
          ellipsis()
        .item-desc
          line-height: .4rem
          color: #ccc
          ellipsis()
    </style>