DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)title>
<script src="https://cdn.staticfile.org/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;
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.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" alt="">
<div class="title">{{item.title}}div>
<div class="cell">
<span>￥259span>
<span>+span>
div>
<del>￥275.25del>
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109