带过滤器的VueJS2 v-html

概述如何用过滤器显示原始html？ 我有这样的事情： K.json = function( json ) { if( typeof json!='string' ) json = JSON.stringify( json, null, 2 ); json = json.replace( /</g, '<' ).replace( />/g, '>' ); // replace 如何用过滤器显示原始HTML？

我有这样的事情：

K.Json = function( Json ) {    if( typeof Json!='string' ) Json = JsON.stringify( Json,null,2 );    Json = Json.replace( /</g,'&lt;' ).replace( />/g,'&gt;' ); // replace(/&/g,'&amp;')    var pattern = /("(\u[a-zA-Z0-9]{4}|\[^u]|[^\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g;    var HTML = Json.replace( pattern,function( match ) {        var cls = 'number';        var suffix = '';        if( /^"/.test( match ) ) {            if( /:$/.test( match ) ) {                cls = 'key';                match = match.slice( 0,-1 );                suffix = ':'            } else {                cls = 'string';            }        } else if( /true|false/.test( match ) ) {            cls = 'boolean';        } else if( /null/.test( match ) ) {            cls = 'null';        }        return '<span >' + match + '</span>' + suffix;    } );    return HTML;};Vue.filter( 'Json',K.Json );

并使用这样的东西：

<div v-HTML="thecolumn | Json"></div>

它显示警告并显示错误：

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.

(在根实例中找到)

我也试过论坛的解决方案：https://laracasts.com/discuss/channels/vue/use-a-filter-custom-filter-in-v-html-property?page=1

<p v-HTML="this.$options.filters.Json(description)"></p>

它显示错误：

[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.Vue._render (vue.Js:3054)    at Vue.<anonymous> (vue.Js:2430)    at Watcher.get (vue.Js:1661)    at new Watcher (vue.Js:1653)    at Vue.Vue._mount (vue.Js:2429)    at Vue.$mount (vue.Js:6000)    at Vue.$mount (vue.Js:8327)

在VueJs2上执行此 *** 作的正确方法是什么？

解决方法 为了完整起见,您有一些选择,例如：

> v-HTML =“$options.filters.FILTERname(args)”或
>：inner-HTML.prop =“args | FILTERname”或
> v-HTML =“METHODname(args)”,如果您创建方法.

见下面的演示.

function Json(text) {  // do your magic  return text.toupperCase(); // just for demo}Vue.filter('Json',function (value) {    return Json(value);})new Vue({  el: '#app',data: {    message: 'Hello Vue.Js!'  },methods: {    JsonMethod(v) {      return Json(v); // create a "proxy" to the outer function    }  }})

<script src="https://unpkg.com/vue"></script><div ID="app">  <p v-HTML="$options.filters.Json(message)"></p>    <p :inner-HTML.prop="message | Json"></p>    <p v-HTML="JsonMethod(message)"></p></div>

总结

以上是内存溢出为你收集整理的带过滤器的VueJS2 v-html全部内容，希望文章能够帮你解决带过滤器的VueJS2 v-html所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。