解決方案：
感謝@Jeronimas，我想出了如何dynamic components在 vue 中使用。基本上，您創建一個在和標簽child component之間切換的標簽，具體取決于. 你必須為此使用element，因為它是一個固有的 vue 組件來管理。<p><input>props<component>dynamic components
child：
<template>
<input v-if="input" type="text" value="hello world">
<p v-else>hello world</p>
</template>
<script setup>
const props = defineProps({
input: Boolean
})
//emit input when form is submitted...
</script>
parent：
<template>
<component :is="p" :input="true"/>
</template>
<script setup>
import p from './p.vue'
</script>
Vue 很棒 <3.
原始問題：
是否可以將文本輸入<p>標簽，以便將其存盤在資料庫中？我想構建一個“實時” CMS，類似于 wordpress/webflow，并且使用格式化<input>欄位而不是<p>/<h>元素會使 html 變得混亂，因為基本上你必須創建兩個相同的站點，一個帶有普通文本標簽，一個帶有可編輯的帶有輸入欄位，看起來像普通的文本標簽。
我想知道是否有辦法操縱反應性物件，比如ref讓它成為可能？
或者，您可以創建一個完全沒有普通文本標簽的站點，而是使用輸入欄位占位符，但這可能會擾亂 SEO。
uj5u.com熱心網友回復：
就像上面的評論一樣，在:is狀態之間切換時可以使用。
<component :is="tag">
tagvalue 可以是動態的，并且根據tagvalue 組件將改變其狀態。
我建議在模式下使用div支持v-html任何標記live并且當用戶處于editing模式時顯示富文本欄位。對于富文本編輯，我建議查看https://tiptap.dev/
您可以系結輸入值，tiptap 將創建您需要的任何 html 標簽<p/>, <li/>, <h1/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/478078.html
標籤：javascript html Vue.js Vuejs3
下一篇：Vuex的自動重繪