循环5个 input 用v-model
时间: 2023-07-28 08:21:45 浏览: 40
您可以使用Vue.js的v-for指令和v-model指令来循环创建5个input,并将它们的值绑定到Vue实例中的一个数组中。以下是一个示例代码:
```html
<template>
<div>
<div v-for="(input, index) in inputs" :key="index">
<label>Input {{ index + 1 }}</label>
<input type="text" v-model="inputs[index]">
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputs: ['', '', '', '', '']
}
}
}
</script>
```
在上面的代码中,我们使用了v-for指令循环创建5个input,每个input的值使用v-model指令绑定到inputs数组中对应的元素上。为了创建5个空的输入框,我们在Vue实例的data方法中初始化了一个包含5个空字符串的数组。
相关问题
循环5次inputv-model 绑定好多
您好,对于循环5次的input v-model绑定,您可以使用v-for指令和数组来实现。具体实现步骤如下:
1. 在data中定义一个数组,包含5个对象,每个对象包含一个input绑定的value属性。
2. 在模板中使用v-for指令循环遍历数组,为每个input元素绑定v-model指令,绑定的值为对应数组元素的value属性。
示例代码如下:
```
<template>
<div>
<div v-for="(item, index) in inputList" :key="index">
<input v-model="item.value">
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputList: [
{ value: "" },
{ value: "" },
{ value: "" },
{ value: "" },
{ value: "" },
],
};
},
};
</script>
```
以上代码会渲染出5个input元素,并且每个元素都绑定了v-model指令,绑定的值分别为inputList数组中每个对象的value属性。
循环数字5 input v-model 绑定好多
您好,对于循环数字5的input v-model绑定,您可以使用v-for指令和数组来实现。具体实现步骤如下:
1. 在data中定义一个数字变量,例如num,初始化为5。
2. 在模板中使用v-for指令循环遍历num,为每个input元素绑定v-model指令,绑定的值可以是一个数组中对应的元素,或者是一个对象中的属性。
示例代码如下:
```
<template>
<div>
<div v-for="i in num" :key="i">
<input v-model="inputList[i-1]">
</div>
</div>
</template>
<script>
export default {
data() {
return {
num: 5,
inputList: ["", "", "", "", ""],
};
},
};
</script>
```
以上代码会渲染出5个input元素,并且每个元素都绑定了v-model指令,绑定的值分别为inputList数组中对应的元素。注意,由于数组下标从0开始,而v-for循环从1开始,因此需要在绑定v-model时将i减1。