vue动态变量名之封装方法，简洁代码

最新推荐文章于 2024-09-06 22:20:29 发布

huang_jimei

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量203

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/huang_jimei/article/details/141922549

版权

一、繁长的代码，例如

            watchQuill() {
				if (this.content1.length > 0) {
					this.editorError1 = false;
				} else {
					this.editorError1 = true;
				}
			},
			watchQuil2() {
				if (this.content2.length > 0) {
					this.editorError2 = false;
				} else {
					this.editorError2 = true;
				}
			},
			watchQuil3() {
				if (this.content3.length > 0) {
					this.editorError3 = false;
				} else {
					this.editorError3 = true;
				}
			},

2、可以使用动态变量名var a2=this[${'content' + num}]

           watchQuill(num) {
				var a2=this[`${'content' + num}`];//动态变量名
				if(a2.length>0){
					this[`${'editorError' + num}`]=false
				}else{
					this[`${'editorError' + num}`]=true
				}
			},

3、调用

<quill-editor ref="myQuill" v-model="content1" class="editor"  @change="watchQuill(1)" />
<quill-editor ref="myQuill" v-model="content2" class="editor"  @change="watchQuill(2)" />