如何 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 和计算属性以及复选框来镜像输入字段

Vue.js 文本输入不显示 v-model 的值

Vue.js 根据 v-model 值更改文本输入的占位符

Vue:从自定义组件派生的自定义组件中的 v-model 和输入事件

vue2 v-model—绑定事件—深度响应式

Vue 常用的指令有哪些?并且说明其作用