vue3.js中将一段文字中的特殊字符替换成可输入的input框

使用场景：

如：要处理后端接口返回的数据，使页面中呈现类似于“填空题”形式的时候，我们需要将数据中的某些特殊字符替换成可输入的input框，实现数据的填写和收集。

---

效果描述

用图片表示：

---

代码实现：

主要思路：先将字符拆分，渲染的时候再“合”

<template>
	<!-- 原 -->
	<view class="">
		{{data}}
	</view>
	<!-- 替换后 -->
	<view class="box">
		<view class="item1">{{processedData[0]}}</view>
		<input class="input" type="text" v-model="inputValue" placeholder="可输入" maxlength=5 @blur="collectDate"/>
		<view class="item2">{{processedData[1]}}</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	
	// 假设从后端接口接收到的数据存储在变量 data 中
	let data = "1、近1个月，您晚上睡觉通常在__点钟";
	
	// 定义一个响应式变量来存储输入框的值
	const inputValue = ref('');
	
	// 处理字符串，将其切分为列表
	const processedData = computed(() => {
		const newRate = data.split("__").map(i => i.trim())
	return newRate;
	});
	
	//收集用户填写数据函数
	function collectDate(){
		//inputValue...
	}
	
</script>

<style lang="scss" scoped>
	.box{
		vertical-align: middle;
		line-height: 1.5em; /* 确保行高相同 */
		.item1{
			display: inline-block;
		}
		.input{
			display: inline-block;
			position: relative;
			top: 15rpx;
			border-bottom: 5rpx solid #ccc;
			width: 110rpx;
		}
		.item2{
			display: inline-block;
		}
	}   
</style>

提示：为方便描述，上面代码中处理的是一条自己定义的数据（data），开发过程中需要处理的可能是后端接口返回的一组数据，情景不同，细节不同，上仅供参考