Vue模板字符串的使用，【html标签、Element-uivue template模板渲染】

文章目录

技术
背景
关于在vue 中 html标签的渲染与使用[v-html]
关于在vue 中element组件标签模板渲染与使用

技术

Vue父子组件传值
Vue render函数的引用
Vue.extend的使用
Vue v-html的引用

背景

业务需在web端回显DOm结构的报告预览，现主要针对element组件元素渲染的代码解析

在引入正题之前，我们先来关注一下这个问题,

关于在vue 中 html标签的渲染与使用[v-html]

现简述用法：

 <div class="content" v-html="rawHtml | htmlFilter"></div>

需将转义过的html代码通过vue的filter(过滤器)转义成为普通html代码，本例中添加了名为htmlFilter的过滤器:

filters: {unescape:function (html) {return html.replace(html ? /&(?!#?\w+;)/g : /&/g, '&').replace(/</g, "<").replace(/>/g, ">").replace(/"/g, "\"").replace(/'/g, "\'");}}

接下来，我们进入正题:

关于在vue 中element组件标签模板渲染与使用

总体结构为：父组件->子组件[此为需要的渲染的element结构标签]

此业务为前后端联调，后端负责返回需要渲染的模板字符串格式，如下图所示：

templateHtml: `<el-form:model="{ type: '' }":rules="{ type: [{ required: true, trigger: '' }] }"><el-form-item label="活动性质" prop="type"><el-checkbox :value="true" label="美食/餐厅线上活动"></el-checkbox><el-checkbox label="地推活动"></el-checkbox><el-checkbox label="线下主题活动"></el-checkbox><el-checkbox label="单纯品牌曝光"></el-checkbox></el-form-item></el-form>`,

前后采用template替代模板字符串直接渲染在v-html中未果，随后查询资料得知可以使用render,Vue.extend挂载,jsx渲染等技术，本例将主要介绍前两者:

首先，在引入子组件中申明需要渲染的模板templateHtml:

<mySlot :html="templateHtml"></mySlot>

随后使用render函数渲染，最后实现模板的动态赋值,代码块如下：

import Vue from "vue";export default {name: "RequireHtml",components: {mySlot: {// template: `<div>{{myMessage}}</div>`,// 在 JavaScript 中使用 camelCaseprops: {html: String,},render(h) {const com = Vue.extend({template: this.html,});return h(com, {});},},},data() {return {isShow: undefined,templateHtml: `<div></div>`,};},methods: {getList(html) {this.templateHtml = html;},}, };

备注：这里的getList方法用于父级组件的字符模板传值

此致
Kyle

Vue模板字符串的使用，【html标签、Element-uivue template模板渲染】相关推荐

element ui 前台模板_一个干净优雅的 Element UI Admin 模板
在前后端分离的单页应用中,RBAC这样的权限模块一般我们的做法是,当用户登录的时候,后台返回当前用户所拥的全部角色的权限集(去重),这些权限集都是唯一的key.如他们定义了每个功能的增删查改,或者更 ...
beetl模板引擎之自定义html标签,分享：beetl模板引擎绑定变量的HTML标签的用法
首先写个tag类: @IocBean public class CmsChannelListTag extends GeneralVarTagBinding { @Inject private Cms ...
es6字符串添加html标签,JavaScript_详解JavaScript ES6中的模板字符串，在 ES6 中引入了一种新的字符 - phpStudy...
详解JavaScript ES6中的模板字符串在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是 ...
javascript模板字符串（标签函数）
前面介绍了javascript的模板字符串的基本知识,今天深入学习一下标签函数模板字符串概述这里先简单说一下模板字符串的概念 1.模板字符串,从名字上可以得出其实返回的是字符串,普通使用其实就想引 ...
ES6之什么是模板字符串？
我们为什么需要模板? 在生活中,我们去银行签一些单子,或者生活中写一些请假条,我们都会有一个模板进行参照,哪里哪里需要怎么填写,哪里自由发挥.就是一种格式的提现.在我们前端中,这个模版又是什么样的概念 ...
ES6中的模板字符串---反引号``
在react中,反引号``有特殊的含义. 如MDN中所述,模板字符串(Template literals)允许嵌入表达式,并且支持多行字符串和字符串插补特性.基本语法为以下几种: 其中第一行为最基本用 ...
[译]JavaScript:ES6中的模板字符串简介
原文:http://tc39wiki.calculist.org/es6/template-strings/ ES6中的模板字符串(template string)是一种能在字符串文本中内嵌表达式的字 ...
js模板字符串自定义类名_详解JavaScript ES6中的模板字符串
这篇文章主要介绍了详解JavaScript ES6中的模板字符串,JS的ES6版本带来诸多简洁化方面的重大改进,需要的朋友可以参考下在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用 ...
深入浅出ES6：模板字符串（`和‘）
反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起 ...

Vue模板字符串的使用，【html标签、Element-uivue template模板渲染】

文章目录

技术

背景

关于在vue 中 html标签的渲染与使用[v-html]

关于在vue 中element组件标签模板渲染与使用

Vue模板字符串的使用，【html标签、Element-uivue template模板渲染】相关推荐

最新文章

热门文章