如何将 html 数据绑定到 vuejs 和 typescript 中的对象

Posted 2023-02-22

【中文标题】如何将 html 数据绑定到 vuejs 和 typescript 中的对象

【英文标题】：How to bind html data to an object in vuejs and typescript

【发布时间】：2020-05-28 19:47:56

【问题描述】：

如何创建接口或类并创建对象并将模板值分配给对象并在控制台上打印？

<template> 
<input type="text" id="name" v-model="name" placeholder="name">
<input type="email" id="email" v-model="email" placeholder="email">
</template>

@Component(

)
export default class example extends Vue(
   data(
       return 
              name: '',
              email: '',
      
)

【问题讨论】：

你试过使用观察者吗？

使用v-model 应该会自动绑定数据对象属性上的输入值。

【参考方案1】：

v-model 应该自动绑定数据对象属性上的输入值。

要在更改时在控制台上打印值，您可以使用 vue watchers。

因为你使用的是类组件，所以可以使用vue-property-decorator包来创建观察者。

import  Component, Watch  from 'vue-property-decorator'

@Component
export default class example extends Vue 
  name = ''
  email = ''

  @Watch('name')
  onNameChanged(val: string, oldVal: string) 
    console.log('name': val)
  

  @Watch('email')
  onEmailChanged(val: string, oldVal: string) 
    console.log('email': val)