vue之v-model基本使用

v-model：获取和设置表单元素的值（双向绑定）

在这里插入图片描述
在这里插入图片描述

<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: '兮动人'
            }
        })
    </script>
</body>
  • 效果
    在这里插入图片描述
  • 当输入框的内容改变时，下面的插值表达式中的message也会同步更新，这就是v-model的双向绑定
    在这里插入图片描述
  • 测试：绑定键盘回车事件，设置初始值为：雨霖铃
<body>
    <div id="app">
        <input type="button" value="修改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: '兮动人'
            },
            methods: {
            	setM: function () {
                    this.message = "雨霖铃";
                }
                getM: function () {
                    alert(this.message);
                },
            }
        })
    </script>
</body>

在这里插入图片描述

  • 当点击修改按钮时
    在这里插入图片描述

  • 修改内容后回车
    在这里插入图片描述

posted @ 2021-02-14 10:50  兮动人  阅读(186)  评论(0)  编辑  收藏  举报