gpt4 book ai didi

vuejs2 - 带过滤器的VueJS2 v-html

转载 作者:行者123 更新时间:2023-12-04 09:03:14 24 4
gpt4 key购买 nike

如何使用过滤器显示原始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 class="' + cls + '">' + 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$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)


在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 - 带过滤器的VueJS2 v-html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41688899/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com