v-model是什么？如何使用？如何实现双向数据绑定？

最新推荐文章于 2024-04-03 16:05:44 发布

jeffrey9595

最新推荐文章于 2024-04-03 16:05:44 发布

阅读量4.8k

点赞数 4

本文链接：https://blog.csdn.net/jeffrey9595/article/details/101397417

版权

v-model是什么？

v-model是vue的model层的data属性，实现输入值与数据域的双向绑定；

如何使用？

在需要用户输入或者选择值的时候，可使用v-model，其值要与data数据域中的属性值对应，这样就能实现绑定；

双向绑定的实现：

页面显示的语法糖：<input v-model="msg" type="text" />，（语法糖的意思是仅供显示）；

实际上面等同于：<input v-bind:value="msg" v-on:input="msg = $event.target.value">，简写即<input v-bind:value="msg" v-on:input="msg = arguments[0]">
故，要让组件的v-model生效，它必须接受一个value属性（用于v-bind绑定响应式数据），且在有新的value时触发input事件并传递数据
另：vue对v-model实现的一个规则：使用了v-model的组件会自动监听input事件并把这个input事件所携带的值传递给v-model所绑定的属性；

HTML部分

<body>

    <div id="itany">

        <input v-model="msg" type="text">

        <p>{{ msg }}</p>

        <!--两对大括号{{}}称之为模板，用来进行数据的绑定显示在页面中-->

    </div>

    

</body>

JavaScript 部分

<script>

        const vm = new Vue({

            el: '#itany',//挂载点

            data: {

                msg: "hello world" //双向数据绑定的值

            }

        });

</script>

未完待续…

jeffrey9595

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
v-model是什么？如何使用？如何实现双向数据绑定？

v-model是什么？v-model是vue的model层的data属性，实现输入值与数据域的双向绑定；如何使用？在需要用户输入或者选择值的时候，可使用v-model，其值要与data数据域中的属性值对应，这样就能实现绑定；双向绑定的实现：页面显示的语法糖：<input v-model="msg" type="text" />，（语法糖的意思是仅供显示）；实际上面等同于：&...
复制链接

扫一扫