-2

我正在尝试使用呈现的输入标记中的值初始化 Vue data() 。我知道可以在 Vue 中使用v-model="[ data-key-here ]"使输入标签值从data()获取数据。有没有办法使用 Vue 中输入标签的值来初始化 data ()中的数据？

代码示例

<template>
  <input v-model="car_name">
  <input v-model="car_weight" value="40">
</template>

<script>
  export default{
    data(){
      return{
        car_name: "Range Rover",
        car_weight: null
      }
    }
  }
</script>

4

2 回答 2

0

据我了解，DOM 将基于 vuejs 数据模型进行渲染。为了设置输入字段的值，您可以初始化 VueJs 数据（在您的情况下为“car_weight”）并省去输入元素上的“值”标签。稍后，当您更改输入时，VueJs 数据将更新以反映这一点，因此：

<template>
  <input v-model="car_name">
  <input v-model="car_weight">
</template>
<script>
  ...
  data () {
    return {
      car_name: "Holden",
      car_weight: 40
    }
  }
</script>

..会给你你的初始值，当你在浏览器中改变输入时，数据将被更新。

于 2021-04-10T14:30:11.030 回答
0

在 Vue.js 中，v-model 指令提供了 TWO-WAY 绑定。因此，在您的情况下，“car_name”是输入标签和数据（）的相同数据。您可以在此处阅读有关它的更多信息v-model 单击此处 处理输入值以数据其输入的侦听事件的其他方式，例如：

<input @input="onInput" /> // tag in template

onInput(event){ // handler for event
this.inputValue = event.target.value; // setting your value with input value
}

在引擎盖下，它与我编写的 v-model 和代码的行为相同。关于这个，你可以阅读这篇文章点击这里

于 2021-04-11T00:59:30.357 回答