,可以通过以下步骤实现:
data() {
return {
inputText: '',
textList: []
}
}
v-model
指令将输入框与data属性中的inputText
绑定,以实现双向数据绑定。同时,使用v-for
指令遍历textList
数组,将每个文本显示为一个新行。例如:<input v-model="inputText" type="text" />
<button @click="addText">添加</button>
<div v-for="text in textList" :key="text">{{ text }}</div>
addText
方法,用于将输入的文本添加到textList
数组中,并清空输入框的内容。例如:methods: {
addText() {
if (this.inputText.trim() !== '') {
this.textList.push(this.inputText);
this.inputText = '';
}
}
}
这样,当用户在输入框中输入文本并点击添加按钮时,输入的文本会被添加到textList
数组中,并在页面上以新行的形式显示出来。
在VueJS中,可以使用以上方法实现在表单中输入的文本以新行的形式显示出来。这种方式适用于需要展示多个输入文本的场景,比如留言板、评论列表等。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云