代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="../js/Vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.content{
max-width: 500px;
margin: 30px auto;
border: 1px solid #e5cc7f;
padding: 20px;
border-radius: 15px ;
text-align: center;
box-shadow: 1px 1px 20px #e5cc7f;
}
.inputkuang {
margin: 10px 0;
display: flex;
input{
flex: 8;
font-size: 20px;
padding: 5px 10px;
box-sizing: border-box;
}
button{
flex: 1;
}
}
ul{
display: flex;
flex-direction: column;
align-items: flex-start;
li{
width: 100%;
list-style: none;
padding: 10px;
display: flex;
align-items: center;
box-sizing: border-box;
span{
&:nth-child(1){
flex: 2;
font-size: 14px;
}
&:nth-child(2){
flex: 9;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
&:nth-child(3){
flex: 6;
font-size: 12px;
}
&:nth-child(4){
flex: 2;
padding: 6px 10px;
background-color: #ccc;
font-size: 13px;
cursor: pointer;
}
&:nth-child(5){
flex: 1;
cursor: pointer;
font-size: 12px;
}
}
.cha{
cursor: pointer;
}
}
}
</style>
</head>
<body>
<div class="content" id="app">
<h1>留言版</h1>
<div class="inputkuang"><input type="text" v-model="msg"><button @click="add()">添加</button></div>
<ul>
<li v-for="(item,index) in list" :key="index">
<span>{{item.name}}说:</span>
<span>{{item.content}}</span>
<span>{{item.date}}</span>
<span @click="edit(item)">修改</span>
<span @click="del(item.id)">X </span>
</li>
</ul>
</div>
<script>
let vm = new Vue({
el:'#app',
data() {
return {
msg:'',
list:[{
id:1,
name:'张三',
content:'1',
date:this.sj(),
},
{
id:2,
name:'张三',
content:'2',
date:this.sj(),
},
{
id:3,
name:'张三',
content:'3',
date:this.sj(),
},
{
id:4,
name:'张三',
content:'4',
date:this.sj(),
},
{
id:5,
name:'张三',
content:'5',
date:this.sj(),
},
]
}
},
// 在这事件处理函数
methods: {
sj(){
let date = new Date()
let sj = date.toLocaleDateString().replace('/','-').replace('/','-')+ ' ' + date.toLocaleTimeString()
return sj
},
add(){
let date = new Date()
let sjc = date.getTime()
this.list.push({
id:sjc,
name:'张三',
content:this.msg,
date:this.sj(),
})
},
del(id){
let index = this.list.findIndex(item=>item.id==id)
this.list.splice(index,1)
},
edit(obj){
let content = prompt('请输入要修改的值',`${obj.content}`)
if (content == "") return alert("修改内容不能为空")
this.list.forEach((item, i) => {
if (item.id == obj.id && content!='') {
item.content = content;
}
});
}
},
})
</script>
</body>
</html>效果图：
注：自己引入Vue.js哦