解决使用v-html 转译富文本数据,标签还在的问题

按理说使用v-html转译富文本数据,html标签就没了,但有时候还是有

方法一

HTMLDecode(text) {
        var temp = document.createElement("div");
        temp.innerHTML = text;
        var output = temp.innerText || temp.textContent;
        temp = null;
        return output;
      },

方法二

HTMLDecode(str) {
        return str
          .replace(str ? /&(?!#?\w+;)/g : /&/g, '&')
          .replace(/&lt;/g, "<")
          .replace(/&gt;/g, ">")
          .replace(/&quot;/g, "\"")
          .replace(/&#39;/g, "\'");
      },
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue ,`v-model` 是一个语法糖,可以方便地实现表单元素和 Vue 实例 data 属性的双向绑定。当使用 `v-model` 绑定一个表单元素时,实际上是通过监听 `input` 事件和更新元素的值来实现的。在模板,我们可以这样使用 `v-model`: ```html <input v-model="message"> ``` 这个语法糖实际上等价于: ```html <input :value="message" @input="message = $event.target.value"> ``` 也就是说,`v-model` 会自动将表单元素的值绑定到 Vue 实例的 `message` 属性上,并在表单元素的值发生改变时更新 `message` 属性的值。需要注意的是,`v-model` 只能应用于表单元素,比如 `input`、`textarea`、`select` 等。 如果需要在自定义组件使用 `v-model`,可以使用 `model` 选项来指定绑定的属性和触发更新的事件。例如: ```js Vue.component('my-component', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)"> ` }) ``` 在这个例子,我们定义了一个名为 `my-component` 的组件,并通过 `model` 选项指定了 `v-model` 绑定的属性为 `checked`,触发更新的事件为 `change`。同时,我们还定义了一个 `checked` 属性,用于接收 `v-model` 绑定的值。在模板,我们使用 `input` 元素来实现一个复选框,并通过 `:checked` 属性和 `@change` 事件来实现双向绑定。需要注意的是,在组件使用 `v-model` 时,不需要使用 `{{}}` 来绑定属性,因为这已经由 `v-model` 处理好了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值