首页 > 其他分享 >vue关于render函数如何渲染v-html

vue关于render函数如何渲染v-html

时间:2023-10-30 17:56:44浏览次数:22  
标签:vue return render 渲染 html htmlStr row

render函数如何渲染v-html,两种方式(适用于搜索关键字高亮)

 例子:“互联网数据” 搜索关键字"" ==>row.htmlStr:互联<span class="search-text">网</span>数据
render: (h, { row }) => {
// 模板组件方式
return  h({ template:"<span>" +row.htmlStr+ "</span> "})
//domProps 方式
return  h("span", { domProps: { innerHTML: row.htmlStr, }}) 
})

标签:vue,return,render,渲染,html,htmlStr,row
From: https://www.cnblogs.com/Jeanchjy/p/17798442.html

相关文章

  • Vue 3中toRaw和markRaw的使用
    文章目录Vue3的响应性系统使用`toRaw`使用`markRaw`使用场景1.与第三方库交互2.提高性能3.避免无限循环总结......
  • vuex
    一、概念:1.为什么要用vuex?传统:每个页面都要去重新请求后台得到将数据存到session、cookie中作用:专门为vue.js设计的集中式状态管理架构.数据仓库,主要管理状态(共用的属性或数据).把数据进行共享,每个页面想用,都可以来调用.......
  • HTML和form表单
    标签的分类HTML学习地址https://www.yuque.com/liyangqit/rg7b7l/lveku6#nX5Va1.单标签imgbrhr<img/>2.双标签ahpdiv<a></a>3.按照标签属性分类1.块儿标签#自己独自占一行h1-h6pdiv2.行内(内联)标签#......
  • vue中attrs的使用
    vue中attrs的使用1.attrs的作用用来进行子孙组件之间的数据传递接收父组件传过来,但是又没有在props中定义的数据。(class及style除外)2.父子组件之间数据传递的用法爷爷组件-grandpa:<template><div><span>爷爷</span><Son:phone="phone"sex="男"......
  • vue3 + vite 的Excel表格的导入导出
    一、安装XLSX插件yarnaddxlsx或者npmixlsx二、引入插件在你需要的页面或者在main.js中引入import*asXLSXfrom'xlsx'三、导出Excel3.1核心api①xlsx.utils.book_new() 新建工作簿② xlsx.uti......
  • Vue2 实现印章徽章组件
    Vue2实现印章徽章组件需要实现的组件效果:该组件有设置颜色、大小、旋转度数和文本内容功能。一、组件实现代码<template><divclass="first-ring"v-bind="getBindValue":class="getStampBadgeClass":style="{transform:`rotate(${rotate}deg)`}&qu......
  • html标签语言化
    1.什么是语义化  语义:一个词或者句子含义正确的解释,很多html标签也具有语义的意义,也就是元素本身传达了关于标签所包含的内容类型信息,例如:h1标签时它将标签改内容解释成重要,该h1标签的语义就是用来标识网页或部门重要标题。2.为什么要语言化 1.结构清晰,是网页呈现出清晰的......
  • [WEB安全] XSS攻击防御 Vue
    一、概念XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript,但实际上也可以包括Java、 VBScript、ActiveX、Flash或者甚至是普通的HTML。攻击成功后,攻击者可......
  • [Vue]列表渲染v-for
       1.用于展示列表数据  2.语法:v-for="(item,index)inxxx":key="yyy"  3.可遍历:数组、对象、字符串(不常用)、指定次数(不常用) <body><divid="root"><!--遍历数组--><h2>人员列表</h2><ul&g......
  • 33-Vue脚手架-浏览器本地存储(使用本地存储优化Todo-List案例)
    什么是网络存储在HTML5之前,开发人员一般是通过使用Cookie在客户端保存一些简单的信息的。在HTML5发布后,提供了一种新的客户端本地保存数据的方法,那就是WebStorage,存储内容大小一般支持5MB左右(不同浏览器可能还不一样),它允许Web应用程序在用户浏览器中实现本地存储机制,两种最......