国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Vue3 使用json編輯器

這篇具有很好參考價值的文章主要介紹了Vue3 使用json編輯器。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

安裝

npm install json-editor-vue3

main中引入

main.js 中加入下面代碼

import "jsoneditor";

不然會有報錯,如jsoneditor does not provide an export named ‘default’。 圖片信息來源-github
Vue3 使用json編輯器,web,json,編輯器,javascript,前端,vue.js

代碼示例


<template>
    <json-editor-vue class="editor" v-model="jsonobj" @blur="remarkValidate" currentMode="text" :modeList="modeList"
        :options="options" />
</template>

<script setup>
import JsonEditorVue from 'json-editor-vue3';
import { ref } from 'vue'

const jsonstr = ref("{ \"a\": 8, \"b\": \"2\", \"c\":8, \"d\":9, \"f\":99 }");
const jsonobj = ref(JSON.parse(jsonstr.value));

const options = ref({
    search: false,
    history: false,
})
const modeList= ref(["text", "view", "tree", "code", "form"]) // 可選模式

const remarkValidate = () => {
    let newjsonstr = JSON.stringify(jsonobj.value);
    console.log("remarkValidate", jsonobj.value, newjsonstr, jsonstr.value);
    if (jsonstr.value == newjsonstr) {
        console.log("no change")
    } else {
        jsonstr.value = newjsonstr
    }
}
</script>

補充說明

json-editor-vue3支持多種配置,如可選模式(多選)modeList、初始模式currentMode,歷史記錄開關(guān)history,搜索功能開關(guān)search等, 上面示例代碼已做部分配置實驗,具體可以參考github的配置介紹。

運行結(jié)果

Vue3 使用json編輯器,web,json,編輯器,javascript,前端,vue.js文章來源地址http://www.zghlxwxcb.cn/news/detail-655054.html

到了這里,關(guān)于Vue3 使用json編輯器的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進(jìn)行投訴反饋,一經(jīng)查實,立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • vue3項目使用富文本編輯器-wangeditor

    vue3項目使用富文本編輯器-wangeditor

    1.下載依賴 2.插件版本 ?3.使用 引入css和組件 配置方法 模板(標(biāo)簽)中插入 效果 ?

    2024年02月09日
    瀏覽(33)
  • Vue3中快速簡單使用CKEditor 5富文本編輯器

    Vue3中快速簡單使用CKEditor 5富文本編輯器

    CKEditor 5就是內(nèi)嵌在網(wǎng)頁中的一個富文本編輯器工具 CKEditor 5開發(fā)文檔(英文):https://ckeditor.com/docs/ckeditor5/latest/index.html 接下來帶你快速熟悉CKEditor 5在Vue3中簡單使用,看最終效果圖?? 本文項目采用CKEditor 5定制經(jīng)典配置(ckeditor5-build-classic) + @ckeditor/ckeditor5-vue 官網(wǎng)定制,選

    2024年02月09日
    瀏覽(23)
  • Vue3 代碼塊高亮顯示并可使用富文本編輯器編輯(highlight.js + wangEditor)

    Vue3 代碼塊高亮顯示并可使用富文本編輯器編輯(highlight.js + wangEditor)

    在Vue項目中實現(xiàn)以下功能: ??功能1. 在頁面中顯示代碼,并將其中的高亮顯示。 ??功能2. 允許對代碼塊進(jìn)行編輯,編輯時代碼也高亮顯示。 ??功能3. 可在編輯器中添加多個代碼塊,動態(tài)渲染代碼高亮。 ? Step1: 安裝所需插件(本文使用npm安裝,若需

    2023年04月21日
    瀏覽(66)
  • vue3使用quill富文本編輯器,保姆級教程,富文本踩坑解決

    vue3使用quill富文本編輯器,保姆級教程,富文本踩坑解決

    本文是封裝成組件使用 先放效果圖 先封裝組件,建立如下目錄 全部代碼如下, 使用 本文是第二個頁面使用這個富文本編輯器有可能watch監(jiān)聽中找不到ref,如果不能正常使用可以稍微改裝下在onMounted里賦值然后在setValue里拋出就好 保姆級教程,有問題歡迎提出

    2024年02月11日
    瀏覽(27)
  • vue3富文本編輯器vue-quill-editor、圖片縮放ImageResize詳細(xì)配置及使用教程

    vue3富文本編輯器vue-quill-editor、圖片縮放ImageResize詳細(xì)配置及使用教程

    官網(wǎng)地址:https://vueup.github.io/vue-quill/ 效果圖 ?1、安裝 2、在vue.config.js中添加配置,否則quill-image-resize-module會出現(xiàn)Cannot read property ‘imports‘ of undefined報錯問題 3、創(chuàng)建quillTool.js(用于添加超鏈接、視頻) 4、完整代碼

    2024年02月04日
    瀏覽(33)
  • 前端使用JSON編輯器、java編輯器、瀏覽器中使用eslint

    前端使用JSON編輯器、java編輯器、瀏覽器中使用eslint

    一、vue3中使用Json 編輯器 二、react中使用(也可用在vue項目中)可用于java、js、json等 Monaco Editor 是一個瀏覽器端的代碼編輯器,它是 VS Code 編輯器的核心部分,可以提供強(qiáng)大的代碼編輯能力,它是 VSCode 的瀏覽器版本Monaco Editor 的特點包括: (1)支持多種編程語言 (2)支持

    2024年01月19日
    瀏覽(21)
  • vue-codemirror實現(xiàn)sql和json線上編輯器

    vue-codemirror實現(xiàn)sql和json線上編輯器

    實習(xí)小計01 今天老大讓寫一個線上編輯器,寫的是sql和json兩個編譯器,sql的編譯器要有提示, 老大扔過來兩個選擇,1:vue-codemirror;2:monaco-editor,一個前端小白,只會vue,所以果斷選那個我有點沾邊的(也就是vue-codemirror),到網(wǎng)上查了一下文檔,照著文檔大致做出來的,

    2023年04月08日
    瀏覽(32)
  • 基于vue3.0實現(xiàn)vr全景編輯器

    基于vue3.0實現(xiàn)vr全景編輯器

    隨著社會的不斷發(fā)現(xiàn),現(xiàn)實生活中有很多時候會使用到全景現(xiàn)實,比如房地產(chǎn)行業(yè)vr看房,汽車行業(yè)vr看車之類的,全景可視化真實還原了現(xiàn)場的場景,真正做到沉浸式體驗。 現(xiàn)在我們基于vue3.0版本開發(fā)出了一款沉浸式的編輯器,只需要使用全景相機(jī)在現(xiàn)場拍攝全景場景,然

    2024年02月15日
    瀏覽(22)
  • Vue3 中vue-quill富文本編輯器圖片縮放

    Vue3 中vue-quill富文本編輯器圖片縮放

    ?導(dǎo)包 ? 添加配置? ?注: 該編輯器已經(jīng)不在維護(hù)了,很古老了,打包后如果報錯,建議使用其他編輯器

    2024年04月25日
    瀏覽(101)
  • vue3代碼編輯器組件codemirror-editor-vue3

    官方文檔:https://github.com/RennCheung/codemirror-editor-vue3 國內(nèi)鏡像:https://renncheung.github.io/codemirror-editor-vue3/zh-CN/guide/getting-started 參考文檔:https://codemirror.net/5/mode/index.html 點擊參考文檔,選擇語言并點擊在文章最后找到mode的格式 在配置項中修改mode,并引入對應(yīng)語言js 如使用pyt

    2024年02月14日
    瀏覽(22)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包