如何 Vue 让输入值 v-model 与 v-bind:value 操作
Posted
技术标签:
【中文标题】如何 Vue 让输入值 v-model 与 v-bind:value 操作【英文标题】:How to Vue let input value v-model with v-bind:value operation 【发布时间】:2020-08-19 17:24:39 【问题描述】:像下面的代码我希望设置input2 v-model绑定data-value2,并且值是从value1 * 2开始操作的,但是它不起作用并抛出错误:
[Vue 警告]:编译模板时出错: v-bind:value="value1*2" 在同一元素上与 v-model 冲突,因为后者已经在内部扩展为值绑定
<div id="app">
<input id="input1" type="number" v-model="value1">
<input id="input2" type="number" v-model="value2" v-bind:value="value1*2">
</div>
<script>
var myObject = new Vue(
el: '#app',
data:
value1: 1,
value2: 1
)
</script>
我尝试过的:
我可以创建一个 onchange 方法来做到这一点,但它需要重复添加v-on:change="operateValue"
代码来输入。
<div id="app">
<input type="number" v-model="value1" v-on:change="operateValue">
<input type="number" v-model="value2" v-on:change="operateValue">
<input type="number" v-model="value3">
</div>
<script>
var app = new Vue(
el: '#app',
data:
value1: 1,
value2: 1,
value3 : 1
,
methods:
operateValue:function()
app.$data.value3 = (app.$data.value1 * 1 + app.$data.value2 * 1 ) * 2;
)
</script>
有可能吗?或者我已经创建了一个自定义操作的方法?
【问题讨论】:
我已经尝试过了,它给了我一个错误 @PhilipF。是的,它会抛出错误,但我的预期是这样的。 你需要将 prop 绑定到一个对象,而不是一个表达式。 请使用计算属性 @halfer 谢谢,我会改正我的坏习惯。 【参考方案1】:你不能在同一个元素上使用 v-model 和 v-bind:value,因为它会给你一个错误。
但是,您可以使用计算属性:
var myObject = new Vue(
el: '#app',
data:
value1: 1
,
computed:
value2: function()
return this.value1 * 2;
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input id="input1" type="number" v-model="value1">
<input id="input2" type="number" v-bind:value="value2">
</div>
您还可以使用以下方法访问“value2”:
console.log(myObject.value2);
更多信息请参考https://vuejs.org/v2/guide/computed.html
【讨论】:
【参考方案2】:你不能这样做,因为 v-model
只是 :value="someVar" and
@update="setSomeVar"` 的简写,你可以做的是拆分它们,那么你应该没有问题。
所以只要写上类似的东西:
<input id="input1" type="number" v-model="value1" @input="value2 = $event*2">
<input id="input2" type="number" :value="value2">
【讨论】:
以上是关于如何 Vue 让输入值 v-model 与 v-bind:value 操作的主要内容,如果未能解决你的问题,请参考以下文章
Vue.js 如何使用 v-model 和计算属性以及复选框来镜像输入字段