VUE を使用した v-html 解析の失敗と解決策

v-html 分析のためにバックエンドから返されたコンテンツを取得すると、分析後にページに HTML コンテンツが表示されることが時々ありますが、私が遭遇した状況を分析したので、皆さんのお役に立てれば幸いです。

 理由: データを返すときにバックエンドがコンテンツを HTML エスキャップしなかったため、ページに HTML コードが出力されました。

解決：

まず受信コンテンツを変換するメソッドを独自にカプセル化し、初期化またはデータを表示する必要があるときに内部のデータコンテンツを上書きします。

例えば：

 

このうち、toHtmlは変換方法なので、下に貼り付けておきますので、皆さんも貼り付けて使ってください！

			//转换html
			toHtml(str) {
				var arrEntities = {
					'lt': '<',
					'gt': '>',
					'nbsp': ' ',
					'amp': '&',
					'quot': '"'
				};
				return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,
					function(all, t) {
						return arrEntities[t];
					});
			},

最後に、皆さんのお役に立てれば幸いです、ありがとう！