Javascript 美化json字符串vuejs2网页包

我尝试将我的json字符串过滤成json突出显示语法，或者类似于带有前置元素标记的json修饰。我不想要一个树状json查看器，只想要一个漂亮的json语法突出显示

模板

<div id="app">
  <pre>{{{ json | jsonPretty }}}</pre>
</div>

我尝试使用JSFIDLE，它可以工作，但当我尝试使用webpack官方vuejs模板时，它显示错误

<pre v-html="prettyAreaData"></pre>

../~/vue loader/lib/template编译器中的

错误？{“id”：“data-v-4b8ecaca”，“hasScoped”：true，“transformToRequire”：{“video”：“src”，“source”：“src”，“img”：“src”，“image”：“xlink:href”}/~/vue loader/lib/selector.js？type=template&index=0/src/components/Hello.vue
（发出的值而不是错误实例）
编译模板时出错：
{{{json | jsonPretty}}}
-无效表达式：{{{json}jsonPretty}}
@./src/components/Hello.vue 10:2-300
@./~/babel loader/lib/~/vue loader/lib/selector.js？type=script&index=0/src/App.vue
@./src/App.vue
@/src/main.js
@multi./build/dev client./src/main.js

编辑：添加JSFIDLE链接

---

我找不到任何关于

{{{html}}

语法的文档。根据，您应该使用

v-html

指令

此外，Vue 2.x过滤器仅在小胡子和

v-bind

表达式中可用

对于其他内容，您应该使用计算属性或方法

我已经将您的JSFIDLE更新为使用Vue 2.x，我假设您在本地使用。我还将

data

函数固定为普通对象

---

Vue实例的

数据

不应是函数。只有组件具有此功能requirement@Phil它有html标签。我用spesific类span标记包装一些匹配正则表达式字符串。所以我可以设计它。您在JSFIDLE中使用的是VUEV1。您在本地使用哪个版本的Vue和Vue loader？@Phil i用户Vue 2和Vue loader ^12。我尝试用计算数据更改过滤器。它使用spesific类解析span标记。但它不是渲染样式。vuejs live cycle有什么问题吗？我也尝试过使用计算数据和函数，但是css没有呈现。我不知道“css没有呈现”是什么意思。你是说CSS中的样式没有被应用吗？如果是，你的CSS是如何包含的？如果它位于一个独立组件中（例如

Hello.vue

），那么它应该位于

标记中。是的，我的意思是没有应用css。我把所有css都放在样式范围内tag@IbnuHabibie您应该使用浏览器的开发工具来检查元素，并找出为什么不应用CSS。我已将filter更改为method，并将CSS样式设置为global。现在问题解决了。非常感谢。

pre {
  outline: 1px solid #ccc;
  padding: 15px; 
  margin: 5px;
  background: white;
 }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

ERROR in ./~/vue-loader/lib/template-compiler?{"id":"data-v-4b8ecaca","hasScoped":true,"transformToRequire":{"video":"src","source":"src","img":"src","image":"xlink:href"}}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/Hello.vue
(Emitted value instead of an instance of Error) 
  Error compiling template:

  <div class="hello">
    <div class="">

      <pre>{{{ json | jsonPretty }}}</pre>
    </div>
  </div>

  - invalid expression: {{{ json | jsonPretty }}}

 @ ./src/components/Hello.vue 10:2-300
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

<pre v-html="prettyAreaData"></pre>

computed: {
  prettyAreaData: function() {
    var value = this.areaData;
    // and so on with the rest of your function