表单input控件数据双向绑定

1、react

import React from "react"
//类组件
class Count extends React.Component {
    
  state = {
    
    message: 'this'
  }
  inputChange = (e) => {
    
    console.log(e.target.value)
    console.log('input')
    this.setState({
    
      message: e.target.value
    })
  }
  render () {
    
    return (
      <>
        <input type="text"
          value={
    this.state.message}
          onChange={
    this.inputChange} />
          <p>实现了双向数据绑定:{
    this.state.message}</p>
      </>
    )
  }
}
function App () {
    
  return (
    <div className="App">
      <Count></Count>
    </div>
  )
}

export default App

2、vue

<template>
  <div id="app">
   <input type="text" @input="inputChange" :value="message" />
   <p>双向数据绑定:{
    {
    message}}</p>
   <p>'v-model ' = ':value' + '@input' 实现的：</p>
   <input type="text" v-model="message" /> 
  </div>
</template>
<script>
export default {
    
  data() {
    
    return {
    
      message:'this'
    }
  },
  methods:{
    
    inputChange(e){
    
      console.log(e.target.value);
      console.log('input');
      this.message = e.target.value;
    }
  }
}
</script>
<style>
</style>