Vue 双向数据绑定、数据变化 v-model

不能够输入就是没有value值，没有value值就证明不能捕获用户的输入，连输入的值都不能捕获那怎么可能影响数据的变化呢？v-bind最大特点就是单向数据绑定，修改了data里面的值容器里面的值也会跟着改变，但是修改容器里面的值data里面的值是不会发生变化的。还有另外一个指令可以完成双向的绑定。之前通过v-bind来完成的数据绑定，属性值和表达式进行绑定，表达式的值发生变化了属性值也跟着发生变化

富士康质检员张全蛋

4067人浏览 · 2023-11-27 10:37:53

富士康质检员张全蛋 · 2023-11-27 10:37:53 发布

v-bind和v-model的使用场景

当html标签的属性是个变量的时候就使用v-bind
当html标签的值发生变化，绑定的data中的变量也要发生变化时就使用v-model

之前通过v-bind来完成的数据绑定，属性值和表达式进行绑定，表达式的值发生变化了属性值也跟着发生变化。

单向数据绑定属性值绑定：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
 
<body>  

    <div id="app">
        单向数据绑定:<input type="text" v-bind:value="name">           
    </div>
         
    <script type="text/javascript"> 

    Vue.config.productionTip = false     
      new Vue({    
          el: "#app",   
          data:{ 
            name: "lucas",
          }
       })
    </script>
 
</body>
</html>

v-bind最大特点就是单向数据绑定，修改了data里面的值容器里面的值也会跟着改变，但是修改容器里面的值data里面的值是不会发生变化的。

还有另外一个指令可以完成双向的绑定。也就是页面中的值发生变化还能够影响到data的值，这就需要使用v-model指令了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--引入vue,这里引入vue那么这里就多了vue构造函数-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
 
<body>  

    <div id="app">
        单向数据绑定：<input type="text" v-bind:value="name"><br>
        双向数据绑定：<input type="text" v-model:value="name">
    </div>
         
    <script type="text/javascript"> 
    Vue.config.productionTip = false     
      new Vue({    
          el: "#app",   
          data:{ 
            name: "lucas",
          }
       })
    </script>
 
</body>
</html>

但是需要注意的是v-modle是不能使用在如h2这种标签上面的。v-model只能应用在表单类元素上（输入类元素，也就是得有value值才行）。

随着输入，删除你的value值是在发生改变的，而h2这种标题类型的是不能够输入的。不能够输入就是没有value值，没有value值就证明不能捕获用户的输入，连输入的值都不能捕获那怎么可能影响数据的变化呢？所以这就是v-model的设计意义和value值绑定。

input 单选框、多选框、select框、多行输入。有很多的表单元素，这些表单元素都有一个特点就是都有value值，因为v-model就是对value进行说话。

     <h1 v-model:x="name"></h1>

Vue中有2种数据绑定的方式：
1.单向绑(v-bind):数据只能从data流向页面（单方向）
2.双向绑定(V-model):数据不仅能从data流向页面，还可以从页面流向data（双方向）

备注：
1.双向绑定一般都应用在表单类元素上(如：input、select等)
2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值

最后简写如下：

    <div id="app">
        v-bind  单向数据绑定：<input type="text" :value="name"><br>
        v-model 双向数据绑定：<input type="text" v-model="name">
    </div>

--------------------------------------------------------------------------------------------------------------------------------

v-model 底层逻辑

双向绑定就是为了解决用户能不能拿到表单数据，解决最终拿到用户交互之后最终选择的值。

双向数据绑定 : 通过前面学习知道 Vue 是数据驱动的，数据驱动有一个精髓之处是数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。

v-model 指令其实是一个语法糖，背后本质上包含 v-bind 和 v-on :@input 两个操作。

<input v-model = "sth" /> 等同于 <input :value = "sth" @input = "function sth = $event.target.value" />

详解

$event 指代当前触发的事件对象。（无论是change（只有当你失去焦点的时候你才能拿到它的最新值）还是input（你每次输入一个，它都会触发变化），都会有一个event）（这里是通过input事件来实现，而非change事件）
$event.target 指代当前触发的事件对象的dom
$event.target.value 就是当前dom元素的value值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>    
    <div id="vue">
       <input type="text" :value="msg" @input="input($event)">
    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                    msg: "vue"
                }
            },
            watch:{
                   msg(newVal,oldVal){
                      console.log("watch oldVal:"+ oldVal)
                      console.log("watch newVal:"+ newVal)
                   }
                },
                methods:{
                   input(event){
                       this.msg =  event.target.value
                       console.log("event.target.value:" + event.target.value + "  this.msg:" + this.msg)
                   }
                }
            }
    //挂载到html当中
    Vue.createApp(HelloVueApp).mount('#vue')
    </script>

</body>
</html>

上面其实完成了双向绑定，当input框里面的值发生变化了会将变化之后的值给到data里面的变量，上面就是数据双向绑定的逻辑。

v-model: 单选框(radio)：单个选择结果绑定到一个v-model的值中

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>    
    <div id="vue">
        <input type="radio" value="Go" v-model="msg">Go</input>
        <input type="radio" value="Vue" v-model="msg">Vue</input>
    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                    msg: ''
                }
            },
            watch:{
                   msg(newVal,oldVal){
                      console.log("watch oldVal:"+ oldVal)
                      console.log("watch newVal:"+ newVal)
                   }
                }
            }
    //挂载到html当中
    Vue.createApp(HelloVueApp).mount('#vue')

    </script>

</body>

</html>

v-model: 多选框多选框(checkbox)：多个选择结果绑定到一个v-model的值中

多选框的特性就是多选，它的值会是一个数组。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
       <input type="checkbox" value="swim" v-model="selected">游泳</input>
       <input type="checkbox" value="gim" v-model="selected">健身</input>
       <input type="checkbox" value="travel" v-model="selected">旅游</input>
       <p>{{ selected }}</p>

    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                    selected: []
                }
            },
            watch:{
                selected(){
                    console.log(this.selected)
                }
            }
        } 
    //挂载到html当中
    Vue.createApp(HelloVueApp).mount('#vue')

    </script>

</body>

</html>

v-model：登录案例:获取用户输入用户名和密码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
    <form action="#">
       <h1 style="color: red;">欢迎访问后台管理页面</h1>
       用户名:<input type="text" v-model="form.name"><br>
       密码:<input type="password" v-model="form.passwd"><br>
       <button type="button" @click="login()">登入</button>
    </form>
   
    <p v-show="isShow" style="color: red;">登入失败！！！！！！！！</p>

    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                    form:{
                        name: "",
                        passwd: ""
                    },
                    isShow: false
                }
            },
            methods:{
                login(){
                    console.log(this.form.name,this.form.passwd)
                    if (this.form.name == "lucas" && this.form.passwd == "123456"){
                        alert("登入成功")
                    }else{
                        this.isShow = true
                        alert("登入失败")                        
                    }
                }
            }
        } 
    //挂载到html当中
    Vue.createApp(HelloVueApp).mount('#vue')

    </script>

</body>

</html>

常用指令总结

这些指令可以满足我们在页面中做任何数据的处理。包括引用某个值，监听某个事件，如点击和选择。绑定某个属性，如图片的src，样式，class style都行。

通过v-model做数据的绑定，主要用于表单，因为表单才是和用户交互。才是需要我们拿到动态数据的。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^