Question

我需要从某些呈现的评论文本中删除开始和结束<p>标记。我将内容作为prop传递给组件，我认为在这样做时，它不允许v-html指令正常工作。

我需要在没有html标签的情况下呈现内容

这是我尝试使用v-html

正常渲染的地方

 <textarea class="form-control comment-inline-edit" v-html="content" name="comment-inline-edit" cols="45" rows="3"></textarea>

这是我从父组件

传递渲染内容的地方

<CommentEdit v-show="isEditting" :content="comment.content.rendered" v-on:cancel="cancelEdit" />

除了使用v-html之外，还有VueJS方法吗？

Answer 1

我建议您使用过滤器从VueJS中的渲染文本中删除HTML，这样您就可以重复使用应用程序周围的过滤器，而不是特定的单一计算。

我写了以下内容，它利用了浏览器的解析（最可靠的方法），因为正则表达式可以被用户愚蠢所阻挠：

Vue.filter('striphtml', function (value) {
  var div = document.createElement("div");
  div.innerHTML = value;
  var text = div.textContent || div.innerText || "";
  return text;
});

在app.js中加入此内容之后，您可以按照以下方式将其呈现在任意位置：

{{ pdf.description | striphtml }}

Answer 2

如何在javascript already has an answer中删除文本中的HTML标记。

Vue的方法是创建一个计算属性，运行代码从呈现的内容中删除HTML标记，然后将其传递给CommentEdit组件：

computed: {
  strippedContent() {
    let regex = /(<([^>]+)>)/ig;
    return this.comment.content.rendered.replace(regex, "");
  }
}

<CommentEdit v-show="isEditting" :content="strippedContent" />

Answer 3

  <p> @{{data.description | strippedContent}} </p>


filters: {
    strippedContent: function(string) {
           return string.replace(/<\/?[^>]+>/ig, " "); 
    }
}

为我工作

如何从呈现的文本

3 个答案: