Vue7.6学习笔记热门推荐

我不是女神ヾ 2022-03-02 11:44 172阅读 0赞

上代码：

<template>
      <div>
        <div class="title">热销推荐</div>
        <ul>
          <li
            class="item border-bottom"
            v-for="item of recomendList"
            :key="item.id"
          >
            <img class="item-img" :src="item.imgUrl" />
            <div class="item-info">
              <p class="item-title">{
       { item.title }}</p>
              <p class="item-desc">{
       { item.desc }}</p>
              <button class="item-button">查看详情</button>
            </div>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HomeRecommend',
      data () {
        return {
          recomendList: [{
            id: '0001',
            imgUrl: 'http://img1.qunarzz.com/sight/p0/1901/7c/7cb1cca588241d6ba3.img.jpg_200x200_297820fb.jpg',
            title: '厦门娱乐万岁',
            desc: '谁说来厦门就要去鼓浪屿？其实不登鼓浪屿也有新玩法，去探寻你不知道的海底世界'
          }, {
            id: '0002',
            imgUrl: 'http://img1.qunarzz.com/sight/p0/1901/7c/7cb1cca588241d6ba3.img.jpg_200x200_297820fb.jpg',
            title: '厦门娱乐万岁',
            desc: '谁说来厦门就要去鼓浪屿？其实不登鼓浪屿也有新玩法，去探寻你不知道的海底世界'
          }, {
            id: '0003',
            imgUrl: 'http://img1.qunarzz.com/sight/p0/1901/7c/7cb1cca588241d6ba3.img.jpg_200x200_297820fb.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
        overflow: hidden
        display: flex
        hieght: 1.9rem
        .item-img
          height: 1.7rem
          width: 1.7rem
          padding: .1rem
        .item-info
    //所有子元素的长度相同
          flex: 1
          min-width: 0
          padding: .1rem
          .item-title
            line-height: .54rem
            font-size: .32rem
            ellipsis()
          .item-desc
            line-height: .4rem
            color: #ccc
            ellipsis()
          .item-button
            line-height: .44rem
            margin-top: .16rem
            background: #ff9300
            padding: 0 .2rem
            border-radius: .06rem
            color: #fff
    </style>

Vue的组件的基本操作方式就是：

建Vue组件，在Home.vue中导入组件。然后剩下的就是写组件样式