如何使用html输入元素值

如何解决如何使用html输入元素值

我正在尝试使用呈现的 input 标记中的值初始化 Vue data()。 我知道可以使用 v-model="[data-key-here]" 在 Vue 中。有什么方法可以使用作为 Vue 中 input 标签值的数据在 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>

解决方法

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

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

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

,

在 Vue.js 中，v-model 指令提供了双向绑定。因此，在您的情况下，“car_name”与输入标签和 data() 的数据相同。您可以在此处阅读更多相关信息v-model click here 其他处理输入值到数据输入监听事件的方法，例如：

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

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

在幕后，它与我编写的 v-model 和代码的行为相同。关于这个，你可以阅读这篇文章click here