V-model: Get and set the value of a form element (bidirectional binding)



<body>
    <div id="app">
        <input type="text" v-model="message" @keyup>
        <h2>{{ message }}</h2>
    </div>

    <script src=".. /js/vue.js"></script>
    <script>
        const app = new Vue({
        el: '#app'.data: {
            message: 'It looks beautiful'}})</script>
</body>
Copy the code
  • The effect

  • When the contents of the input box change, the message in the interpolation below is also updated synchronously, which is the two-way binding of the V-Model

  • Test: Bind the keyboard return event and set the initial value to rain bell
<body>
    <div id="app">
        <input type="button" value="To modify the message" @click="setM"><br><br>
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{ message }}</h2>
    </div>

    <script src=".. /js/vue.js"></script>
    <script>
        const app = new Vue({
        el: '#app'.data: {
            message: 'It looks beautiful'
            },
            methods: {
            	setM: function () {
                    this.message = "Rain bell";
                }
                getM: function () {
                    alert(this.message); }}})</script>
</body>
Copy the code

  • When the modify button is clicked

  • Modify the content and press Enter