Vue 留言板 升降序
【摘要】 Vue 留言板 升降序功能要求使用Vue完成留言板案例；使用文本域编辑留言内容，点击提交按钮，将留言信息展示在留言框下方的列表中；留言列表中显示留言内容和留言时间；创建两个按钮，分别显示降序和升序，点击不同的按钮，对留言列表进行重新排序，按照发布时间排序；（留言列表为数组、每条留言内容是一个对象，参考TodoList案例）<!DOCTYPE html><html lang="en"><...
Vue 留言板 升降序
功能要求
- 使用Vue完成留言板案例；
- 使用文本域编辑留言内容，点击提交按钮，将留言信息展示在留言框下方的列表中；
- 留言列表中显示留言内容和留言时间；
- 创建两个按钮，分别显示降序和升序，点击不同的按钮，对留言列表进行重新排序，按照发布时间排序；
（留言列表为数组、每条留言内容是一个对象，参考TodoList案例）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="text">
<button @click="add">提交</button>
<button @click="sort(1)">升序</button>
<button @click="sort(2)">降序</button>
<table border="1" width="800px" cellspacing="0">
<tr>
<th>序号</th>
<th>留言内容</th>
<th>时间</th>
<th>操作</th>
</tr>
<tr v-for="(v,i) in list">
<td>{{i+1}}</td> <td>{{v.text}}</td> <br> <br>
<td>{{v.times}}</td> <td @click="del(i)">删除</td> <br> <br>
</tr>
</table>
</div>
<script>
new Vue({
el: "#app",
data: {
text: "",
list: []
},
methods: {
add() {
if (!this.text) return;
this.list.push({
text: this.text,
times: new Date().toLocaleString().replace(/\//g, '-'), //转为当地时间
time: new Date().getTime(), //获取的毫秒数
})
this.text = ""
},
sort(id) {
switch (id) {
case 1:
this.list.sort((x, y) => {
return x.time - y.time;
})
break;
case 2:
this.list.sort((x, y) => {
return y.time - x.time;
})
break;
}
},
del(i) {
this.list.splice(i, 1)
}
}
})
</script>
</body>
</html>
数组排序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="root">
<textarea v-model="text" rows="3" cols="25"></textarea>
<button @click="submit">提交</button>
<p>
<button @click="sort(1)">最新留言</button>
<button @click="sort(2)">最早留言</button>
</p>
<h3>留言：</h3>
<ul>
<li v-for="item in list">
<p>{{getParseTime(item.time)}}</p>
<p>{{item.text}}</p>
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
list: [],
text: ""
},
methods: {
submit() { //提交按钮
this.list.push({
text: this.text,
time: new Date().getTime()
})
this.text = ""
},
getParseTime(ms) { //留言时间，年-月-日 时:分:秒 格式
let time = new Date();
time.setTime(ms)
let submitTime =
`${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`
return submitTime
},
sort(id) { //排序,id为1是降序，id为2是升序
switch (id) {
case 1:
this.list.sort((a, b) => {
return b.time - a.time
})
break;
case 2:
this.list.sort((a, b) => {
return a.time - b.time
})
break;
}
}
}
})
</script>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）