插入 JS 片段

const firstName = ref('Kate')
const lastName = ref('Jen')

const fullName = computed({
    // getter
    get(){
        return firstName.value + ' ' + lastName.value;
    },
    // setter
    set(newValue){
        // Es6结构赋值
        [firstName.value,lastName.value] = newValue.split(' ');
    }
})

fullName.value = "John Lee" // 此处会触发Setter函数.firstName和lastName也会相应更新

插入 JSON 片段


{
  "name": "x-admin",
  "type": "module",
  "version": "1.0.1",
  "description": "A crafted admin template, built with Vue3, Vite, TypeScript, Element Plus, and more",
  "dependencies": {
    "@element-plus/icons-vue": "2.3.1",
    "@wangeditor/editor": "5.1.23",
    "axios": "1.7.9",
    "colord": "2.9.3",
    "dayjs": "1.11.13",
    "element-plus": "2.12",
    "js-cookie": "3.0.5",
    "lodash-es": "4.17.21",
    "mitt": "3.0.1",
    "normalize.css": "8.0.1",
    "nprogress": "0.2.0",
    "path-browserify": "1.0.1",
    "path-to-regexp": "8.2.0",
    "pinia": "3.0.1",
    "screenfull": "6.0.2",
    "vue": "3.5.13",
    "vue-router": "4.5.0"
  },
  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}

插入 HTML 片段

<div class="wang-editor-wrapper">
    <!-- 工具栏 -->
    <div ref="toolbarRef" class="wang-editor-toolbar">哈哈哈什么玩意</div>

    <!-- 编辑器 -->
    <div ref="editorRef" class="wang-editor-content" :style="{ minHeight: `${props.height}px` }">是啊 666 </div>
</div>

大家都说好。我也觉得很好！

哈哈哈！oooo!!!休息一下，看会儿视频哦～


作者：不便透露姓名的 XXX