要向列表中的项目添加日期并将其显示在网页上,你可以使用HTML、CSS和JavaScript来完成。以下是一个简单的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日期列表</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.text }} - {{ item.date }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
new Vue({
el: '#app',
data: {
items: [
{ text: '项目1', date: '' },
{ text: '项目2', date: '' },
{ text: '项目3', date: '' }
]
},
created() {
this.addDateToItems();
},
methods: {
addDateToItems() {
const today = new Date();
const formattedDate = today.toISOString().split('T')[0];
this.items.forEach(item => {
item.date = formattedDate;
});
}
}
});
created
生命周期钩子中调用addDateToItems
方法,该方法会为每个列表项添加当前日期。addDateToItems
方法中修改日期格式化逻辑。通过以上步骤,你可以轻松地向列表中的项目添加日期并将其显示在网页上。
领取专属 10元无门槛券
手把手带您无忧上云