前端在vue3项目中,如何让一个字符串不断的拼接加进来的数据,用户吧input中的数据去除时,字符串中对应位置的数据也被删掉
时间: 2024-09-18 08:10:48 浏览: 52
Vue循环中多个input绑定指定v-model实例
在 Vue3 项目中,你可以通过双向数据绑定(v-model)结合数组和字符串模板的方式来实现实时更新字符串并动态删除内容。这里可以使用 `v-model` 和一个数组来存储需要插入的输入值,然后利用 `map()` 或者 `slice()` 动态生成拼接后的字符串。
首先,假设你有一个数组 `inputData` 存储用户输入的数据,如:
```javascript
<template>
<div>
<input v-model="currentInput" />
<p v-for="(item, index) in inputData" :key="index">
{{ item }}
</p>
<span ref="dynamicString"></span>
</div>
</template>
<script setup>
import { ref } from 'vue';
const inputData = ref(['初始数据', '', '更多数据']);
let currentInput = '';
function updateDynamicString() {
const dynamicStrArray = inputData.value.filter((_, i) => currentInput.includes(inputData.value[i])); // 过滤出当前输入存在的项
const dynamicString = dynamicStrArray.join(''); // 拼接成字符串
// 更新 DOM 中的 span 元素
this.$ref('dynamicString').innerHTML = dynamicString;
}
// 当用户修改 input 时,触发更新
watch(currentInput, () => {
updateDynamicString();
});
</script>
```
当用户在 `input` 中删除字符时,由于 `currentInput.includes(inputData.value[i])` 的判断,对应的 `inputData` 中的数据会被从字符串中移除。记得在实际项目中添加适当的错误处理和边界条件检查。
阅读全文