vue学习之路(四):v-model双向数据绑定

2021/11/22 23:16:09

本文主要是介绍vue学习之路(四):v-model双向数据绑定,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

数据双向绑定

简单理解为:当视图中的数据发生变化的时候,数据包中的数据也要发生改变;同理,数据包中的数据改变时,视图中的数据也要发生改变,主要用于实时获取表单元素中的value值。

首先介绍一下v-model

v-model :负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。同时需要注意,v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值,而总是将 Vue 实例的数据作为数据来源。所以应该通过 JavaScript 在组件的 data 选项中声明初始值。

下面通过两个简单的demo理解一下单向绑定和双向绑定:

单向数据绑定

	<div id="app">
        <!-- 1. 单向绑定 -->
        <input type="text" v-bind:value="msg">
        <h1>{{msg}}</h1>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'hello word',
            }
        })
     </script>

运行结果:
当输入框中的数据发生变化时,视图中的数据并没有发生改变,不会影响{{msg}}中的数据。
在这里插入图片描述
双向数据绑定demo1

    <div id="app">
     <!-- 2. 双向绑定 -->
        <input type="text" v-model="msg">
    </div>
    
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'hello word',
            }
        })
	</script>

运行结果:
当输入框中的数据发生变化时,视图中的数据也发生相同的变化。
在这里插入图片描述
双向数据绑定demo2

	<div id="app">
        <select v-model="gender">
            <!-- 默认情况下select会直接显示第一个option的值,也就是girl -->
            <!-- 现进行数据绑定,设置默认值是boy -->
            <option value="girl">女</option>
            <option value="boy">男</option>
        </select>
        <!-- 切换option的时候,{{gender}}的值也会对应发生变化 -->
        {{gender}}
    </div>
    
    <script>
        new Vue({
            el:'#app',
            data:{
                gender:'boy',
            }
        })
	</script>

运行结果:
在这里插入图片描述
当切换option时,数据包中的gender会跟着一起变化。



这篇关于vue学习之路(四):v-model双向数据绑定的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程