当前位置: 首页 > article >正文

前端去除 html 的标签 v-html 改为方法

在Vue中,如果你想要去除HTML字符串中的标签,可以使用JavaScript的DOM解析器。以下是一个简单的方法,使用DOMParser来解析HTML字符串并移除所有标签:

methods: {
  stripTags(htmlString) {
    const doc = new DOMParser().parseFromString(htmlString, 'text/html');
    return doc.body.textContent || "";
  }
}

你可以在Vue组件的方法中添加这个stripTags方法,然后在模板中使用它来显示去除标签后的文本

<template>
  <div>
    <p>{{ stripTags(htmlContent) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<p>这是一个<strong>HTML</strong>字符串。</p>'
    };
  },
  methods: {
    // 方法定义同上
  }
};
</script>

在这个例子中,htmlContent是含有HTML标签的字符串,stripTags方法会将其转换为纯文本。在模板中,使用{{ stripTags(htmlContent) }}来显示处理后的文本。


http://www.kler.cn/news/294626.html

相关文章:

  • C++学习笔记(10)
  • “设计模式双剑合璧:工厂模式与策略模式在支付系统中的完美结合”
  • YOLOv8改进 | Conv篇 | YOLOv8引入DWR
  • 2024年,女生到底适合转行ui设计还是软件测试?
  • golang闭包中变量获取
  • 3个 ArcGIS imagery的新特性
  • ELK学习笔记(三)——使用Filebeat8.15.0收集日志
  • 美金充值卡自己收会更划算吗?相当卡商的学员看过来
  • PHP一键创建在线考试考试答题系统小程序源码助力远程教育与考核
  • 驾驭冰雪 安全无忧,韩泰高性能冬季轮胎新品上市
  • 装修找人做“私活”有哪些风险?
  • Oracle---PAG程序全局区的组成:堆栈区、会话区、游标区、排序区
  • 【debug】nvidia-smi:Failed to initialize NVML: Unknown Error
  • Redis 持久化 AOF、RDB
  • 如果文件从存储卡中被误删除,存储卡数据恢复如何恢复?
  • 【Linux】萌新看过来!一篇文章带你走进Linux世界
  • 【Qt】处理键盘事件
  • Spring-容器:IOC-基于注解管理Bean
  • C++11 --- 智能指针
  • 自然语言处理系列五十》文本分类算法》SVM支持向量机算法原理
  • 超详细!!!electron-vite-vue开发桌面应用之创建新窗口以及主进程和子进程的通信监听(十二)
  • (1)DRF项目服务器部署(Linux/Nginx/Uwsgi)
  • 数据结构---双向链表(内存泄露相关知识)
  • 关于易优cms自定义字段不显示的问题
  • 梧桐数据库(WuTongDB):聚簇索引的原理、实现方法及应用场景
  • [RK3588][Android12] Android->拦截指定进程冻结,避免后台服务长时间运行被系统冻结
  • Spring全局异常处理HandlerExceptionResolver使用
  • 【网络安全基础】网络安全的基本概念与威胁
  • Python批量提取pdf标题-作者信息
  • Redis发布订阅PUB/SUB