我使用v-html来剥离html标签,但仍然显示处理后的html。问题是,我只想显示200个字符。我可以构建截断脚本,但v-html似乎不需要过滤器。我如何才能实现这一点?
例如:
// This
<div class="excerpt" v-html="body_html"></div>
// Into this
<div class="excerpt" v-html="body_html | truncate(200)"></div>
我尝试构建一个striptag过滤器,并截断+剥离常规<p>
的标签,但它不处理html。
例如,像这样:(不是我喜欢的方法,除非你能找到一种方法让我改进它,这样我仍然可以得到渲染的HTML。
<div>{{strippedContent | truncate(200)}}</div>
Vue.filter("truncate", function(value, length) {
if (!value) return "";
value = value.toString();
if (value.length > length) {
return value.substring(0, length) + "...";
} else {
return value;
}
});
export default {
data() {
return {
body_html: this.post.body_html
};
},
computed: {
strippedContent() {
let regex = /(<([^>]+)>)/gi;
return this.body_html.replace(regex, "");
}
}
};
1条答案
按热度按时间k4emjkb11#
你能从文档https://v2.vuejs.org/v2/guide/filters.html尝试另一种(本地)方法吗?
在创建Vue示例之前,应该进行过滤器的全局(您的方式)注册。您能检查一下吗?
Upd.在v-html和过滤器一起工作时也有错误:
1.“v-html不适用于过滤器”https://github.com/vuejs/vue/issues/4352
1.“Vue filter dont work on v-html”https://github.com/vuejs/vue/issues/6056
溶液
在模板中,将v-html行替换为
不再需要striphtml过滤器