【前端学习记录】Vue框架——发布框

阎王睁眼

已于 2023-10-16 22:51:39 修改

阅读量81

点赞数

文章标签：前端学习 vue.js

于 2023-10-07 22:00:00 首次发布

本文链接：https://blog.csdn.net/djfsalfjasfdsa/article/details/133610620

版权

学习了一些课程后试着写的代码，有适当的改动，比较小白哈

文章目录

前言
问题
解决
所有代码
总结

前言

做一个类似微博的发布框
1.未输入时文本框里有默认内容
2.输入时自动记录字数
3.超过字数在文本框下面出现警告文字
4.有清空和发布按钮

问题

在没输入文字的时候警告文字就显示了，这显然和平常使用的发布框不一样
请添加图片描述

解决

加一个参数i就好了，记录成功发布之前点击发布按钮的次数，i>0的时候，说明用户在尝试发布空的信息，显示警告文字。

submit(){
				this.i++
				if(this.content!=""){
					console.log(this.content);
					this.content=""
					alert("发布成功！");
					}
			}

这样又有个问题，在用户发送过一次以后还是会出现一样的问题（没输入但是警告文字显示）
请添加图片描述
在文本框内容满足成功发布的条件的时候i=0就好

submit(){
				this.i++
				if(this.content!=""){
					console.log(this.content);
					this.content=""
					alert("发布成功！");
					this.i=0
					}
			}

所有代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style>
		/* 设置警告字体颜色 */
		.warn{
			color:red;
		}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<textarea cols="30" rows="10" placeholder="请发表你今天的心情..." v-model="content"></textarea>

			<!-- 超过五十字显示警告 -->
			<p :class="{warn:content.length>50}" v-model="content">{{content.length}}/50字</p>

			<!-- 内容为空不允许发布同时发布按钮失效 -->
			<!-- i表示在成功发布前点击发布按钮的次数 -->
			<p class="warn" v-show="content.length<=0 && i>0">发布内容不能为空！</p>
			<p>
				<button @click="submit()" :disabled="content.length>50">发布</button>
			<!-- 清空按钮 -->
				<button @click="clear()" :disabled="content.length<=0">清空</button>
			</p>
			</div>
	</body>
	<script src='js/vue.js'></script>
	<script>
	var vue=new Vue({
		el:'#app',
		data:{
				content:"",
				sub:false,
				i:0
		},
		methods:{
			//发布函数，点击发布按钮后清空输入框内容，并在控制台打印输入数据同时提示用户发布成功

			submit(){
				this.i++
				if(this.content!=""){
					console.log(this.content);
					this.content=""
					alert("发布成功！");
					this.i=0
					}
			},
			clear(){
				this.content=""
			}
		}
	})
	</script>
</html>