<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 测试实例 - 菜鸟教程(runoob)</title>
<script src="https://cdn.staticfile/vue/2.7.0/vue.min.js"></script>
<style>
  * {
    margin: 0; padding: 0;
  }
  .video_list {
    margin: 10px;
    display: flex;
    overflow-y: hidden;
  }
  .video_list li {
    border: 1px solid #aaa;
    border-radius: 5px;
    margin-right: 10px;
    display: inline-block;
    padding: 10px;
  }
  .video_list li img {
    width: 100%;
    border-radius: 5px;
  }
  .video_list li:nth-last-child(1) {
    margin-right: 0;
  }
  .video_list::-webkit-scrollbar{
    display: none;
  }
  .title {
    width: 120px;
    /* autoprefixer: off */
    /* autoprefixer: ignore next */   
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 14px;
  }
  .cell {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
  }
  del {
    font-size: 12px;
  }
</style>
</head>
<body>
<div id="app">
  <div>
    <ul class="video_list" ref="content">
      <li v-for="(item, index) in list" :key="index">
        <img src="https://cube.elemecdn/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" alt="">
        <div class="title">{{item.title}}</div>
        <div class="cell">
          <span>￥259</span>
          <span>+</span>
        </div>
        <del>￥275.25</del>
        <div v-if="item.isBtn">
          <button>查看详情</button>
        </div>
      </li>
     </ul>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    list: [
      {
        title: '啊啊啊啊啊啊啊啊',
        isBtn: false,
      },
      {
        title: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
        isBtn: true,
      },
      {
        title: '啊啊啊啊啊啊啊啊',
        isBtn: true,
      },
      {
        title: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
        isBtn: false,
      },
      {
        title: '啊啊啊啊啊啊啊啊',
        isBtn: false,
      },
      {
        title: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
        isBtn: true,
      }
    ]
  }
})
</script>
</body>
</html>

更多推荐

css 横向滚动条加高度自适应