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>