使用watch实现实时数据更新
//(html comment removed: 标签选项 )
<div m-y-3>选择标签或填写：
<n-checkbox-group v-model:value="tagOption">
<n-space item-style="display: flex;">
<n-checkbox value=" blockchain " label="区块链" />
<n-checkbox value=" cryptocurrency " label="加密货币" />
<n-checkbox value=" bitcoin " label="比特币" />
</n-space>
</n-checkbox-group>
</div>
<div m-b-3>
<n-input
v-model:value="tagsX"
type="text"
placeholder="输入英文标签，以逗号或空格分隔"
/>
</div>
<script setup>
const tagOption = ref(' ')
const tagsX = ref('cn cn-reader ')
watch(tagOption, () => {
tagsX.value += tagOption.value[[tagOption.value.length - 1]] //每次增加一条
}, {flush: 'pre', immediate: true, deep: true})
</script>