input循环5次v-model绑定不同的值用字符串传
时间: 2023-07-28 20:15:54 浏览: 48
可以用一个数组来存储这五个值,然后使用 v-for 循环来生成五个输入框,每个输入框绑定数组中的一个值。具体代码如下:
```
<template>
<div>
<div v-for="(value, index) in values" :key="index">
<label>输入{{ index + 1 }}:</label>
<input type="text" v-model="values[index]">
</div>
</div>
</template>
<script>
export default {
data() {
return {
values: ['', '', '', '', '']
}
}
}
</script>
```
在上面的代码中,我们定义了一个 values 数组,其中包含了五个空字符串。然后使用 v-for 循环来生成五个输入框,每个输入框绑定数组中的一个值。当用户输入时,会自动更新数组中对应的值。
相关问题
循环5个 input 用v-model
您可以使用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个空字符串的数组。
v-model拼接字符串
v-model 是 Vue.js 中常用的一个指令,用于实现双向数据绑定。在使用 v-model 绑定 input 元素的值时,可以通过在 input 元素上添加修饰符来实现拼接字符串的功能。
例如,我们需要在 input 中输入一个电话号码,但是需要在号码前面加上国际区号 +86 ,可以这样实现:
```
<input v-model="phone" type="text">
```
然后我们在 Vue 实例中添加一个 computed 计算属性:
```
computed: {
fullPhone: function () {
return '+86' + this.phone
}
}
```
最后,在 input 元素中使用 v-model 时,使用修饰符 .lazy 或者 .number,这样就可以在输入完手机号码后自动拼接国际区号了:
```
<input v-model.lazy="phone" type="text">
```
```
<input v-model.number="phone" type="text">
```