标签：vue liuhongdi 37 json 3.2 pretty

一，安装第三方库vue-json-pretty:

1,代码地址:

https://github.com/leezng/vue-json-pretty

2,安装:

liuhongdi@lhdpc:/data/vue/axios$ npm install vue-json-pretty --save
 
added 1 package in 3s

3,查看已安装库的版本:

liuhongdi@lhdpc:/data/vue/axios$ npm list vue-json-pretty
axios@0.1.0 /data/vue/axios
└── vue-json-pretty@2.1.1 

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，js代码:

<template>
  <div style="width: 800px;margin: auto;">
    <div style="width:800px;text-shadow: 2px 2px 5px #777;
          line-height: 28px;font-size: 28px;color: rgb(90, 90, 90);
          margin-top: 20px;">
      Json格式化
    </div>

    <div style="text-align: left;margin-top:10px;">json:</div>
    <el-input
        id="jsonText"
        v-model="jsonText"
        :rows="4"
        type="textarea"
        placeholder="待格式化的json文本"
        style="margin-top:10px;width:800px;"
    />
    <div style="text-align: left;margin-top:10px;">格式化:</div>
    <vue-json-pretty :data="jsonObj" > </vue-json-pretty>
  </div>
</template>

<script>
import {ref,computed} from "vue"
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
export default {
  name: "JsonShow",
  components: {
    VueJsonPretty,
  },
  setup () {
    //json文本
      const jsonText = ref("");
      //json对象
    const jsonObj=computed(()=>{ //计算属性传递参数
      if (jsonText.value.trim() == '') {
        return {}
      } else {
        let obj = {};
        try{
          obj = JSON.parse(jsonText.value)
          console.log(obj);
        } catch (e) {
          alert("解析出错:"+e);
        }
        return obj
      }
    })
      return {
        jsonText,
        jsonObj,
      }
  }
}
</script>

<style scoped>

</style>

三，测试效果

四，查看vue框架的版本: 

liuhongdi@lhdpc:/data/vue/child$ npm list vue
child@0.1.0 /data/vue/child
├─┬ @vue/cli-plugin-babel@5.0.6
│ └─┬ @vue/babel-preset-app@5.0.6
│   └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped

 

标签：vue,liuhongdi,37,json,3.2,pretty
来源： https://www.cnblogs.com/architectforest/p/16481067.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。