uni-app中多行输入框中显示输入模板样例(需要换行-使用v-html),显示输入内容长度(computed计算),输入内容换行(cols),输入内容长度限制(maxlength)

html部分:
<view>
	<textarea v-model="patientDesc.value"
		v-html="patientDesc.descCur" cols="30" maxlength="500" rows="6">
	</textarea>
	<p >{{ textareaWordLenth }}/500</p>
</view>

js部分:
export default{
	data(){
		return{
			patientDesc:{
				value:"",
				descCur:"",
				desc:"<p>1.症状、疾病和身体状况</p><p>2.症状发生的时间、有无伴随症状</p><p>3.吃过什么药物</p><p>4.如就诊过,提供医生诊断、治疗经过</p><p>5.既往病史</p>"
			}
		}
	},
	computed:{
		textareaWordLenth(){
			if(this.patientDesc.value.length==0){
				this.patientDesc.descCur = this.patientDesc.desc;
			}else{
				this.patientDesc.descCur = "";
			}
		  return this.patientDesc.value.length;
		}
	}

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐