欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

教你使用vue3寫Json-Preview的示例代碼

 更新時間:2022年06月22日 14:34:01   作者:Jay·Chan  
這篇文章主要介紹了用vue3寫了一個Json-Preview的相關(guān)知識,引入后直接<json-preview?v-model="jsonData"></json-preview>就可以使用了,本文通過示例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

引入后直接<json-preview v-model="jsonData"></json-preview>就可以使用了。近期比較忙,代碼就不做調(diào)整了。

示例效果

index.vue 文件

<template>
  <div v-if="isObject" class="json-preview">
    <span v-if="!!parentKey"><span class="json-preview-key">"{{ parentKey }}"</span> : </span>
    <span style="color:#2c3e50">{</span>
    <div class="json-preview-object-block">
      <div v-for="(item,index) in jsonValue">
        <span v-if="typeof item.value === 'string' ">
          <span class="json-preview-key">"{{ item.key }}"</span> :
          <span class="json-preview-string-value">"{{ item.value }}"</span><span
            v-if="index != (jsonValue.length-1)">,</span>
        </span>
        <span v-if="typeof item.value === 'number' ">
          <span class="json-preview-key">"{{ item.key }}"</span> :
          <span class="json-preview-number-value">{{
              item.value
            }}</span><span v-if="index != (jsonValue.length-1)"><span v-if="index != (jsonValue.length-1)">,</span>
        </span>
        </span>
        <span v-if="typeof item.value === 'boolean' ">
          <span class="json-preview-key">"{{ item.key }}"</span> :
          <span class="json-preview-bol-value">{{ item.value }}</span><span
            v-if="index != (jsonValue.length-1)">,</span>
        </span>
        <span v-if="typeof item.value === 'object'">
          <json-preview :parent-key="item.key" :model-value="item.value"></json-preview>
        </span>
      </div>
    </div>
    <span style="color:#2c3e50">}</span>
  </div>
  <div v-else>
    <span v-if="!!parentKey"><span class="json-preview-key">"{{ parentKey }}"</span> : </span>
    <span style="color:#2c3e50">[</span>
    <div class="json-preview-object-block">
      <div v-for="(item,index) in jsonValue">
        <span v-if="typeof item === 'string' ">
          <span class="json-preview-string-value">"{{ item }}"</span><span v-if="index != (jsonValue.length-1)">,</span>
        </span>
        <span v-if="typeof item === 'number' ">
          <span class="json-preview-number-value">{{ item }}</span><span v-if="index != (jsonValue.length-1)">,</span>
        </span>
        <span v-if="typeof item === 'boolean' ">
          <span class="json-preview-bol-value">{{ item }}</span><span v-if="index != (jsonValue.length-1)">,</span>
        </span>
        <span v-if="typeof item === 'object'">
          <json-preview :model-value="item"></json-preview>
        </span>
      </div>
    </div>
    <span style="color:#2c3e50">]</span>
  </div>
</template>
<script lang="ts">
import {computed, defineComponent, reactive, toRefs} from 'vue'
import './index.sass'

export default defineComponent({
  name: 'json-preview',
  props: {
    modelValue: {
      type: [String, Array, Object],
      default: ''
    },
    parentKey: {
      default: ''
    },
    paddingLeft: {
      default: 0
    }
  },
  setup(props) {
    const jsonValue = computed(() => {
      if (!!!props.modelValue) {
        return {}
      }
      if (typeof props.modelValue === 'string') {
        let value = JSON.parse(props.modelValue)
        let jsonValue = []
        for (let key in value) {
          jsonValue.push({
            key: key,
            value: value[key],
          })
        }
        return jsonValue
      }
      if (typeof props.modelValue === 'object' && !(props.modelValue instanceof Array)) {
        let jsonValue = []
        for (let key in props.modelValue) {
          jsonValue.push({
            key: key,
            value: props.modelValue[key],
          })
        }
        return jsonValue
      }
      return props.modelValue
    })
    const state = reactive({
      jsonValue,
      isObject: computed(() => {
        return !(props.modelValue instanceof Array)
      })
    })
    return {
      ...toRefs(state),
    }
  }
})
</script>

index.sass 文件

.json-preview
  font-size: 20px
  font-weight: 400

  &-object-block
    margin: 5px 0 5px 2px
    border-left: dotted 1px
    padding-left: 30px

    .json-preview-key
      color: purple

    .json-preview-number-value
      color: #29b8db

    .json-preview-string-value
      color: #0dbc79

    .json-preview-bol-value
      color: #c678dd

到此這篇關(guān)于用vue3寫了一個Json-Preview的文章就介紹到這了,更多相關(guān)vue3 Json-Preview內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue中實現(xiàn)移動端的scroll滾動方法

    vue中實現(xiàn)移動端的scroll滾動方法

    下面小編就為大家分享一篇vue中實現(xiàn)移動端的scroll滾動方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue子父組件通信的實現(xiàn)代碼

    vue子父組件通信的實現(xiàn)代碼

    這篇文章主要介紹了vue子父組件通信的實現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2017-07-07
  • 在Vue中使用echarts的實例代碼(3種圖)

    在Vue中使用echarts的實例代碼(3種圖)

    本篇文章主要介紹了在Vue中使用echarts的實例代碼(3種圖),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • vue2.0 自定義 餅狀圖 (Echarts)組件的方法

    vue2.0 自定義 餅狀圖 (Echarts)組件的方法

    下面小編就為大家分享一篇vue2.0 自定義 餅狀圖 (Echarts)組件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • 在vue中實現(xiàn)表單驗證碼與滑動驗證功能的代碼詳解

    在vue中實現(xiàn)表單驗證碼與滑動驗證功能的代碼詳解

    在Web應用程序中,表單驗證碼和滑動驗證是常見的安全機制,用于防止惡意攻擊和機器人攻擊,本文將介紹如何使用Vue和vue-verify-code庫來實現(xiàn)表單驗證碼和滑動驗證功能,需要的朋友可以參考下
    2023-06-06
  • Vue項目前后端聯(lián)調(diào)(使用proxyTable實現(xiàn)跨域方式)

    Vue項目前后端聯(lián)調(diào)(使用proxyTable實現(xiàn)跨域方式)

    這篇文章主要介紹了Vue項目前后端聯(lián)調(diào)(使用proxyTable實現(xiàn)跨域方式),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue實現(xiàn)打卡功能

    vue實現(xiàn)打卡功能

    這篇文章主要為大家詳細介紹了vue實現(xiàn)打卡功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • Vue中使用 ElementUi 的 el-select 實現(xiàn)全選功能(思路詳解)

    Vue中使用 ElementUi 的 el-select 實現(xiàn)全選功能(思路詳解

    在開發(fā)中,有一個需求是 選項組件中使用到一個 全選的功能,特在這記錄下實現(xiàn)的方法,方便后續(xù)的查閱,以及方便大家查閱借鑒,對vue   ElementUi 全選功能感興趣的朋友一起看看吧
    2024-02-02
  • Vue?Router組合布局用法詳解

    Vue?Router組合布局用法詳解

    今天我們用一種新的布局方式,使用路由視圖來實現(xiàn)布局樣式,本文將給大家介紹如何使用Vue?Router組合布局,文中有詳細的代碼示例供大家參考,感興趣的同學可以跟著小編一起學習
    2023-05-05
  • Vue實現(xiàn)剪貼板復制功能

    Vue實現(xiàn)剪貼板復制功能

    這篇文章主要介紹了Vue實現(xiàn)剪貼板復制功能,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-12-12

最新評論