一图看懂 vue的v-model语法糖 && react的受控组件

vue的v-model语法糖

  vue学习笔记

这不就是一毛一样的数据双向绑定吗

vue

<template>
    <div class="VModel">
        v-model 语法糖
        <input
            type="text"
            @change="txt=$event.target.value"
            :value="txt"
        >
    </div>
</template>

<script>
export default {
    name: "VModel",
    components: {},

    props: {},
    data() {
        return {
            txt: 123
        }
    },
}
</script>

<style scoped>

</style>

react

import React, {Component} from 'react';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            txt: '123'
        };
    }

    render() {
        return (
            <div>
                <input
                    type="text"
                    value={this.state.txt}
                    onChange={(event) => {
                        this.setState({
                            txt: event.target.value
                        })
                    }}
                />
            </div>
        );
    }
}

export default App;