vue的双向数据绑定是怎么实现的（Vue中如何使用v-model双向数据绑定select、checked等多种表单元素）

 v-model 指令可以用在表单 input    
    
    
 、textarea 及 select 元素上创建双向数据绑定   
    
    
    
。它会根据控件类型自动选取正确的方法来更新元素


     


     


     


 。

基础用法：

<div id="APP"> <input type="text" v-model:value="tel" > <p>您的手机号：{{tel}}</p> </div> const vm = new Vue({ el: "#APP", data(){ return { tel: 15503931234, } }, });

注：当我们修改输入框里的内容时    
    
    
 ，下方的内容也会跟着变化 




 




 




 。也就是说我们修改内容时    


     


     


     ，改变了 data 中的数据




 




 




 




，data 中的数据变化后又重新渲染了 p 标签里的内容   

   

   

   

。

 v-model 与 v-bind 指令的区别：

<div id="APP"> <input type="text" :value="tel" > <p>您的手机号：{{tel}}</p> </div> const vm = new Vue({ el: "#APP", data(){ return { tel: 15503931234, } }, });

注：使用 v-bind 绑定数据   

   

   

，修改输入框里的内容时     

     

     

     ，下方的内容不会发生变化

     

     

     

。也就是说我们修改内容时




  




  




  



，不会改变 data 中的数据
  




  




  




  。

 Vue 中两种数据绑定方式的区别：

单向数据绑定 v-bind ：数据只能从 data 流向页面  


  


  


  

。

双向数据绑定 v-model ：数据不仅能从 data 流向页面
  


  


  


，还可以从页面流向 data 
     
     
     
。

 v-model 指令简写：

v-model:value 也可以简写为 v-model      
     
     
    ，因为 v-model 默认收集的就是 value 值

   




   




   




  。

<div id="APP"> <input type="text" v-model="tel" > <p>您的手机号：{{tel}}</p> </div> const vm = new Vue({ el: "#APP", data(){ return { tel: 15503931234, } }, });

注：双向数据绑定一般都应用在表单类元素上（如：input    


     


     


     、select等） 



 



 



 

。

textarea 多行文本使用 v-model：

<div id="APP"> <textarea placeholder="请输入简介" v-model="content"></textarea> <p>您的简介：{{content}}</p> </div> const vm = new Vue({ el: "#APP", data(){ return { content: "", } }, });

 单选按钮使用 v-model：

<div id="APP"> <label> <input type="radio" value="男" v-model="sex"> 男 </label> <label> <input type="radio" value="女" v-model="sex"> 女 </label> <p>您已选择：{{sex}}</p> </div> const vm = new Vue({ el: "#APP", data(){ return { sex: "男", } }, });

注：当选中时 




   




   




   


，sex 为 value 中的值                 。

单个复选框使用 v-model：

<div id="APP"> <input type="checkbox" v-model="status"> <p>是否选中：{{status}}</p> </div> const vm = new Vue({ el: "#APP", data(){ return { status: true, } }, });

注：当选中时

 



 



 



，status 为 true 


    




    




    




  。未选中时                  ，status 为 false .

 单个复选框指定 v-model 选中值:

<div id="APP"> <input type="checkbox" v-model="status" true-value="同意" false-value="不同意"> <p>您是否同意：{{status}}</p> </div> const vm = new Vue({ el: "#APP", data(){ return { status: "同意", } }, });

注：当选中时  




    




    




    

，status 为同意 
















。未选中时

















，status 为不同意                   。

多个复选框使用 v-model:

<div id="APP"> <label> <input type="checkbox" value="草莓" v-model="list"> 草莓 </label> <label> <input type="checkbox" value="蓝莓" v-model="list"> 蓝莓 </label> <label> <input type="checkbox" value="火龙果" v-model="list"> 火龙果 </label> <p>您已选择：{{list}}</p> </div> const vm = new Vue({ el: "#APP", data(){ return { list: ["草莓"], } }, });

注：多个复选框                 ，需要绑定到同一个数组上 


     



     



     



  。选中的值   



     



     



     
，会自动添加到数组中















。

select 单选时使用 v-model:

<div id="APP"> <select v-model="price"> <option value="0">请选择</option> <option value="200">草莓</option> <option value="100">蓝莓</option> <option value="150">火龙果</option> </select> <p>您需要支付：{{price}} 元</p> </div> const vm = new Vue({ el: "#APP", data(){ return { price: 0, } }, });

注：如果 v-model 表达式的初始值未能匹配任何选项


















，select 元素将被渲染为未选中状态   
    
    
    
。所以更推荐给 price 一个默认值


     


     


     


 。

 select 多选时使用 v-model:

<div id="APP"> <select v-model="list" multiple> <option value="草莓">草莓</option> <option value="蓝莓">蓝莓</option> <option value="火龙果">火龙果</option> <option value="香蕉">香蕉</option> <option value="苹果">苹果</option> </select> <p>您已选择：{{list}}</p> </div> const vm = new Vue({ el: "#APP", data(){ return { list: ["草莓","火龙果"], } }, });

注：添加 multiple 属性后    
    
    
 ，按住 Ctrl 键再点击选项可以多选内容    


     


     


     ，多选时需要绑定到同一个数组上 




 




 




 。

原创作者：吴小糖

创作时间：2023.2.28