Question

我尝试将我的json字符串过滤为JSON高亮语法，或者有点像json用美元前标签进行美化。我不想要一个树json查看器，但只是一个很好的JSON语法高亮。

模板

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

VUE

var vm = new Vue({
  el: '#app',
  data() {
    return {
      json:'{ "name: "John Doe" }'
    }
  },
  filters: {
    jsonPretty: function(value) {
      let json = JSON.stringify(JSON.parse(value), null, 2)
      json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+]?\d+)?)/g, function(match) {
        var cls = 'number'
        if (/^"/.test(match)) {
          if (/:$/.test(match)) {
            cls = 'key'
          } else {
            cls = 'string'
          }
        } else if (/true|false/.test(match)) {
          cls = 'boolean'
        } else if (/null/.test(match)) {
          cls = 'null'
        }
        return '<span class="' + cls + '">' + match + '</span>'
      })
    }
  }
});

CSS

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; }

我试试jsfiddle，它正在工作但是当我尝试使用webpack官方vuejs模板时，它显示错误

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

编辑：添加jsfiddle链接

https://jsfiddle.net/Ljck1wmL/5/

Answer 1

我找不到该{{{ html }}}语法的任何文档。根据{{3}}，您应该使用v-html指令。

此外，Vue 2.x过滤器仅在小胡子和v-bind表达式中可用。 official documentation

除此之外，您应该使用计算属性或方法。

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

和

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

我已经更新了你的JSFiddle以使用Vue 2.x，我假设你在本地使用它。我还将data函数修复为普通对象。

You cannot use a filter in v-html

美化json string vuejs2 webpack

1 个答案: