vue 解决input内值的双向绑定问题

最新推荐文章于 2025-11-12 14:53:48 发布

原创最新推荐文章于 2025-11-12 14:53:48 发布 · 4.1w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#input #双向绑定

vue 专栏收录该内容

29 篇文章

订阅专栏

本文介绍在Vue中如何正确实现input元素的数据双向绑定，并通过实例展示了购物清单应用的开发过程，包括使用v-model进行数据绑定的方法。

在使用vue进行双向绑定的时候，第一想到的肯定是官方语法｛｛msg｝｝，但是在input中如果这样想，那就错啦。

错误的写法如下：<input type="text" value="{{item.age}}" />

既然这种写法是错误的，那么怎样才能实现在input中的数据双向绑定呢？方法如下：

用v-model进行绑定

具体代码可见：https://download.youkuaiyun.com/download/colourfultiger/10515153

大体描述如下：

1、遍历显示的数据

data() {
return {
// 购物清单
list: [{
id: 1,
name: '铅笔',
price: 180,
count: 1,
Stotal:180
},
{
id: 2,
name: '书包',
price: 200,
count: 1,
Stotal:200
},
{
id: 3,
name: '衣服',
price: 500,
count: 1,
Stotal:500
}
]
}

2、html写法

<tr v-for="(item,index) in list">
<td>{{ index + 1}}</td>
<td>{{ item.name }}</td>
<td>￥{{ item.price }}</td>
<td>
<button @click="handleReduce(index)" :disabled="item.count===1">-</button>
<input type="text" v-model="item.count" readonly="readonly"/>
<button @click="handleAdd(index)">+</button>
</td>
<td>￥{{ item.Stotal }}</td>
<td>
<el-button @click="handleRemove(index)" type="danger" icon="el-icon-delete" circle></el-button>
</td>
</tr>
<tr>
<td colspan="4"></td>
<td colspan="2">总价：￥{{totalPrice}}</td>

</tr>

3、函数处理部分：

methods: {
handleReduce: function(index) {
if(this.list[index].count === 1) return;
this.list[index].count--;
this.list[index].Stotal = this.list[index].price * this.list[index].count;
},
handleAdd: function(index) {
this.list[index].count++;
this.list[index].Stotal = this.list[index].price * this.list[index].count;
},
handleRemove: function(index) {
this.list[index].splice(index, 1);
}
},
computed: {
//总计
totalPrice: function() {
var total = 0;
for(var i = 0; i < this.list.length; i++) {
var item = this.list[i];
total += item.price * item.count;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');

}