带过滤器的VueJS2 v-html

如何使用过滤器显示原始html

我有这样的想法：

K.json=函数（json）{
if（typeof json！=“string”）json=json.stringify（json，null，2）；
json=json.replace（//g'，）；//replace（//&/g'，&；）
var模式=/（“（\\u[a-zA-Z0-9]{4}\\\[^u]\\\\\\\\”）*”（\s*：）？\b（真|假|空）b |-？\d+（？：\.\d*）（？：[eE][+\-]？\d+）/g；
var html=json.replace（模式、函数（匹配）{
var cls='数字'；
var后缀=“”；
如果（/^”/.test（匹配））{
如果（/：$/.test（匹配））{
cls=‘键’；
match=match.slice（0，-1）；
后缀='：'
}否则{
cls='字符串'；
}
}else if（/true | false/.test（匹配））{
cls='布尔'；
}else if（/null/.test（匹配））{
cls='null'；
}
返回“”+匹配+“”+后缀；
} );
返回html；
};
过滤器（'json'，K.json）；

并使用如下方式：

它显示警告，但显示不正确：

vue.js:523 [Vue warn]: Property or method "json" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 

（在根实例中找到）

我还尝试了来自论坛的解决方案：

它显示错误：

[Vue warn]: Error when rendering root instance: 
vue.js:3063 Uncaught TypeError: Cannot read property 'filters' of undefined
    at eval (eval at makeFunction (vue.js:8260), <anonymous>:2:2975)
    at Proxy.renderList (vue.js:3158)
    at Proxy.eval (eval at makeFunction (vue.js:8260), <anonymous>:2:2169)
    at Vue$3.Vue._render (vue.js:3054)
    at Vue$3.<anonymous> (vue.js:2430)
    at Watcher.get (vue.js:1661)
    at new Watcher (vue.js:1653)
    at Vue$3.Vue._mount (vue.js:2429)
    at Vue$3.$mount (vue.js:6000)
    at Vue$3.$mount (vue.js:8327)

[Vue warn]：呈现根实例时出错：
vue.js:3063未捕获类型错误：无法读取未定义的属性“筛选器”
在评估时（在makeFunction（vue.js:8260），：2:2975时评估）
在Proxy.renderList（vue.js:3158）
在Proxy.eval（在makeFunction（vue.js:8260）上的eval）：2:2169
Vue$3.Vue.\u渲染（Vue.js:3054）
Vue 3美元。（vue.js:2430）
在Watcher.get（vue.js:1661）
在新的观察者（vue.js:1653）
Vue$3.Vue._安装（Vue.js:2429）
在Vue$3.$mount时（Vue.js:6000）
在Vue$3时$mount（Vue.js:8327）

---

在VueJS2上执行此操作的正确方法是什么？

问题是，在将筛选器添加到Vue实例之前，您的HTML已被处理。试着这样做：

var jsonFormatter=function（json）{
if（typeof json！=“string”）json=json.stringify（json，null，2）；
json=json.replace（//g'，）；//replace（//&/g'，&；）
var模式=/（“（\\u[a-zA-Z0-9]{4}\\\[^u]\\\\\\\\”）*”（\s*：）？\b（真|假|空）b |-？\d+（？：\.\d*）（？：[eE][+\-]？\d+）/g；
var html=json.replace（模式、函数（匹配）{
var cls='数字'；
var后缀=“”；
如果（/^”/.test（匹配））{
如果（/：$/.test（匹配））{
cls=‘键’；
match=match.slice（0，-1）；
后缀='：'
}否则{
cls='字符串'；
}
}else if（/true | false/.test（匹配））{
cls='布尔'；
}else if（/null/.test（匹配））{
cls='null'；
}
返回“”+匹配+“”+后缀；
} );
返回html；
}
新Vue({
el:“#应用程序”，
数据（）{
返回{
jsonData:{dog:'woof'，nestedObject:{cat:'meow'}
}
},
过滤器：{
jsonFormatter:jsonFormatter
}
});
//Vue.filter（'jsonFormatter'，jsonFormatter）；//不起作用，因为发生在处理html之后

v-html指令

如果只是显示数据，请创建一个方法：

json(jsonable) {
   return jsonedValue;
}

然后在html中

<div v-html="json(mydata)"></div>

---

为了完整起见，您可以选择以下选项：

• v-html=“$options.filters.FILTERNAME（args）”

  或

• ：内部html.prop=“args | FILTERNAME”

  或

• v-html=“METHODNAME（args）”

  ，如果您创建了一个方法

请参阅下面的演示

函数json（文本）{ //施展你的魔法 返回text.toUpperCase（）；//仅用于演示 } Vue.filter（'json'，函数（值）{ 返回json（值）； }) 新Vue({ el:“#应用程序”， 数据：{ 消息：“您好，Vue.js！” }, 方法：{ jsonMethod（五）{ 返回json（v）；//创建外部函数的“代理” } } })

对于我来说，正如@acdcjunior所指出的，这是有效的：

<p v-html="$options.filters.json(description)"></p>

除此之外，我有两个过滤器要应用，而且它也可以工作：

<p v-html="$options.filters.filter1($options.filters.filter2(description))"></p>

我认为在

v-html中没有-in

忽略所有数据绑定等。奇怪的是，这些选项没有记录在官方文档中。我以前从未见过

：internal html.prop

，但它对我的项目非常有效。回答得很好。非常感谢。请注意，不使用

v-html

可能会影响SSR（服务器端呈现）。在我的Nuxt项目中，静态生成无法显示内容。我切换到使用计算字段而不是使用过滤器。inner-html.prop做了一个小把戏来听

v-bind的
.prop
修饰符！看起来Vue团队在2.6中添加了一个速记版本，但它导致了一些bug。一旦解决了这些问题，它将是
.internal html
而不是
：internal html.prop
，它看起来更方便，并且与
v-bind
速记匹配。