Vue双向绑定
1. 什么是双向绑定
Vue.js是一个MVVM框架，即数据双向绑定,即当数据发生变化的时候,视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。
2. 为什么要实现数据的双向绑定
在Vue.js 中，如果使用vuex ，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项,方便跟踪;局部性数据流使用双向，简单易操作。
3. 在表单中使用双向数据绑定
你可以用v-model指令在表单 <input>、<textarea> 及<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model会忽略所有元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源，你应该通过JavaScript在组件的data选项中声明。
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div id="app"> 10 <!-- 输入的文本：<input type="text" v-model="message">{{message}}--> 11 12 <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea> 13 {{message}} 14 性别： 15 <input type="radio" name="sex" value="男" v-model="wty">男 16 <input type="radio" name="sex" value="女" v-model="wty">女 17 <p>选中了谁{{wty}}</p> 18 19 下拉框： 20 <select v-model="wty"> 21 <option disabled>--请选择--</option> 22 <option>A</option> 23 <option>B</option> 24 <option>C</option> 25 </select> 26 <span>选中了{{wty}}</span> 27 28 </div> 29 30 31 32 33 <!--1.导入Vue.js--> 34 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 35 <script> 36 var vm = new Vue({ 37 el:"#app", 38 data: { 39 message: "1234", 40 wty: 'B' 41 } 42 43 }) 44 </script> 45 </body> 46 </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端