Vue+ElementUI小知识点(日常更新)

                           Vue小知识点(日常更新)

一、element-ui: this.$confirm确定框内容换行显示

1、效果图

2、推荐博客：

地址：https://blog.csdn.net/weixin_43609391/article/details/84971430

 

二、vue页面解析带HTML标签数据

1、效果

将数据中HTML标签解析成HTML效果(如将<br />解析成换行效果)

2、博客推荐

地址：https://www.cnblogs.com/leegent/p/9274424.html

          https://blog.csdn.net/banana960531/article/details/86244149

 

三、vue常用正则表达式检验

1、效果

// 只支持中英文数字：
let nameReg= /^[\u4e00-\u9fa5_a-zA-Z0-9]{1,150}$/;

// 特殊字符全部放开:
let titleReg = /^([\s\S]*){1,150}$/;

2、博客推荐

地址：https://www.jianshu.com/p/0734cc319aa3

 

四、vue两重循环数据显示

1、数据介绍

"cities": {
			"A": [{
				"id": 1,
				"name": "阿坝"
			}, {
				"id": 2,
				"name": "阿克苏"
			}],

			"B": [{
				"id": 1,
				"name": "白银"
			}, {
				"id": 2,
				"name": "蚌埠"
			}],
		}

2、数据遍历

<div class="city" v-for="(item, key) of cities" :key="key">
   <div>{{key}}</div>
   <div>
     <div v-for="itemVal of item" :key="itemVal .id">{{itemVal .name}}</div>
   </div>
</div>

五、vue输入框空格校验

介绍：在vue中使用v-model进行input框校验时，elementui给我们提供一个v-model.trim来进行空格校验，但是确定是该输入框没有不能使用空格按键，在某些信息输入方面可能不大方便。

trim:对字段进行前后除去空格操作，使用该方法可以将输入框字段进行校验。

(that.updateChapterTable.charpterTitle).trim()

注意：使用trim一定要保证格式化的字段不能为null，否则会报错。