简述vue的双向数据绑定步骤Vue入门系列六v-model

发布时间：2026-07-21阅读(1)

导读vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。v-model之input<!DOCTYPEhtml><h....

vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

v-model 之 input

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./asset/vue.js"></script> <title>Vuejs</title></head><body> <div id="app"> <div> <input type="text" v-model="msg" > </div> <div> <p>{{ msg }}</p> </div> </div> </body><script> var app=new Vue({ el:#app, data:{ msg:"hello" }, methods:{ } })</script></html>

Vue入门系列：六 v-model 双向数据绑定 input

页面输出

Vue入门系列：六 v-model 双向数据绑定

解析:

v-model 实现双线数据绑定的意思是不论你是从数据层还是视图层去改变这个值视图和数据层的数据会同时发生改变.

当你在input框里改变hello值的时候,它绑定的msg会自动发生变化.(视图层-->数据层)
页面初始化的时候设置msg=hello 而hello会自动显示在input里面.(数据层-->视图层)

v-model 之 textarea

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./asset/vue.js"></script> <title>Vuejs</title></head><body> <div id="app"> <div>  <textarea v-model="msg" id="" cols="30" rows="10"></textarea> </div> <div> <p>{{ msg }}</p> </div> </div> </body><script> var app=new Vue({ el:#app, data:{ msg:"hello" }, methods:{ } })</script></html>

Vue入门系列：六 v-model 双向数据绑定 textarea

Vue入门系列：六 v-model 双向数据绑定

动态改变文本域里面的数据下面也会一起发生变化

v-model 之 select

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./asset/vue.js"></script> <title>Vuejs</title></head><body> <div id="app"> <div>   <select v-model="msg" id=""> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </div> <div> <p>{{ msg }}</p> </div> </div> </body><script> var app=new Vue({ el:#app, data:{ msg:"2" }, methods:{ } })</script>