vue中v-model的使用

v-mode用于将标签元素的值与vue实例对象中data数据绑定,数据保持一致,从而实现双向数据绑定机制。表单中的数据变化会导致vue实例data数据变化,vue实例中data数据的变化会导致表单数据表化,并且是实时的。

MVVM架构:model即数据,vue实例中绑定的数据;view即页面,页面展示的数据,vm即监听器,监听model与view,哪方数据变化,另一方随即变化。

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue hello world</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg">
    <hr>
    <p>
        {{ msg }}
    </p>
    <hr>
    <input type="button" value="clear" @click="clear">
</div>
<script>
    const app = new Vue({
        //element 用来给vue实例定义一个作用范围
        el: "#app",
        // 用来给vue实例定义一些相关的数据
        data: {
            msg:""
        },
        methods: {
            clear:function () {
                this.msg = '';
            }
        }
    });
</script>
</body>
</html>

运行效果:
在这里插入图片描述
在输入框中输入任何内容,在下面的p标签中同时显示相同的内容;点击clear按钮清楚msg元素的信息,输入框中随即清空。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页