完善留言板-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44479957/article/details/125259416

这是一个使用Vue.js创建的简单留言板应用。用户可以输入留言并点击按钮添加到页面上，每条留言都可以被删除。页面还显示了当前留言的数量。应用通过`v-model`、`v-for`和`v-show`指令实现了数据双向绑定、列表渲染和条件展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
		<style type="text/css">
			.messages{
				width: 300px;
				background: pink;
				padding: 20px 0;
				margin-top: 20px;
			}
			.message{
				width: 200px;
				background: skyblue;
				margin: 0 auto;
				padding: 10px;
				margin-top: 5px;
			}
			.message span{
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="mes"> 
			<button @click="add">留言</button>
			<br> <br>
			<span>有 {{num}} 条留言</span>
			<!-- <div class="messages" v-show="messageArr.length"> -->
			<div class="messages" v-show="isShow()">
				<div class="message" 
					v-for="(val,index) of messageArr"
					:key="index"
				>
					{{val}}
					<span @click='del(index)'>x</span>
				</div>
			</div>
			
		</div>
		
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data(){
					return{
						mes:'',
						messageArr:[]
					}
				},
				methods:{
					add(){
						// 文本框内容不为空时才可添加
						if(this.mes.trim()){
						    this.messageArr.push(this.mes)
							// 添加成功后 清空文本框
							this.mes=''
						}else{
							// 添加失败后 也需要清空文本框
							this.mes=''
							alert('请输入内容')
							
						}
					},
					del(index){
						this.messageArr.splice(index,1)
					},
					isShow(){
						return this.messageArr.length>0
					}
				},
				// 计算函数
				computed: {
					num() {
						console.log('有'+this.messageArr.length+'条留言')
						return this.messageArr.length
					}
				},
			})
		</script>
	</body>
</html>

如果判断数组是否有值并且显示

<div class="messages" v-show="messageArr.length">

或者

isShow(){
	return this.messageArr.length>0
}