前言：
现在大家对“mvc绑定下拉框”大概比较关怀，小伙伴们都想要学习一些“mvc绑定下拉框”的相关知识。那么小编同时在网摘上网罗了一些关于“mvc绑定下拉框””的相关内容，希望你们能喜欢，小伙伴们快快来学习一下吧！本文来源于公众号：Python野路子
MVVM设计思想
MVVM是Model-View-ViewModel的简写。它本质上就是MVC （Model-View- Controller）的改进版。即模型-视图-视图模型。
M：模型(Model)，指的是后端传递的数据，对应data中的数据；
V：视图(View)，指的是所看到的页面；
VM：视图模型(ViewModel)，MVVM模式的核心，它是连接view和model的桥梁。对应Vue实例对象；
它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。
当创建了ViewModel后，双向绑定是如何达成的呢？
首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
使用Vue的过程就是定义MVVM各个组成部分的过程的过程。
1）定义View2） 定义Model3）创建一个Vue实例ViewModel，它用于连接View和Model
MVVM模式本身是实现了双向绑定的，在Vue中可以使用v-model指令来实现表单元素和数据的双向绑定。
数据绑定
Vue中有2种数据绑定的方式：
1）单向绑定（v-bind）：数据模型（Module）和视图（View）数据只能从data流向页面。
2）双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。
双向数据绑定
当Model的数据发生变化的时候，视图View也就发生变化，当视图View发生变化的时候，Model也会跟着同步变化；可以这样说用户在视图上的修改会自动同步到数据模型中去，数据模型也是同样的变化。我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。
表单绑定v-modelinput输入框
<body> <div id="app"> <!-- input的双向数据绑定 --> <!-- 输入框的值改变后，页面上的文字也会改变，文字改变后，输入框中的值也会改变，这就是 双向数据绑定，如果用 input框的 v-model ，就可以不用写value 属性了，直接用它就可以了 --> <h2>{{msg}}</h2> <input type="text" v-model="msg" /> </div> </body> <script> // 生命周期函数：在某一时刻会自动执行的函数 const app = Vue.createApp({ data() { return { msg: 'Hello Vue' } }, methods: { } }).mount('#app'); </script>内部实现原理：
<body> <div id="app"> <!-- input的双向数据绑定 --> <!-- 输入框的值改变后，页面上的文字也会改变，文字改变后，输入框中的值也会改变，这就是 双向数据绑定 --> <h2>{{msg}}</h2> <!-- <input type="text" v-model="msg" /> --> <!-- 实现原理 --> <!-- 利用属性绑定获取msg的值 --> <!-- 利用事件监听v-on(@)监听input事件，改变msg值 --> <input type="text" :value="msg" @input="valueChange" /> </div> </body> <script> // 生命周期函数：在某一时刻会自动执行的函数 const app = Vue.createApp({ data() { return { msg: 'Hello Vue' }; }, methods: { valueChange() { this.msg = event.target.value; } } }).mount('#app'); </script>textarea文本域与input输入框类似：
<body> <div id="app"> <!-- textarea文本域 --> <textarea v-model="text_msg"></textarea> <div>您输入的内容：{{text_msg}}</div> </div> </body> <script> // 生命周期函数：在某一时刻会自动执行的函数 const app = Vue.createApp({ data() { return { text_msg: '' }; }, methods: { valueChange() { this.msg = event.target.value; } } }).mount('#app'); </script>单选按钮radio <body> <div id="app"> <!-- 单选按钮radio --> <label for="male"> <input type="radio" name="male" value="0" v-model="sex" /> 男 </label> <label for="male"> <input type="radio" name="female" value="1" v-model="sex" /> 女 </label> <!-- 显示的是value的值 --> <div> 您选择的性别是： <span v-show="sex=='0'">男</span> <span v-show="sex=='1'">女</span> </div> </div> </body> <script> // 生命周期函数：在某一时刻会自动执行的函数 const app = Vue.createApp({ data() { return { sex: '0' // 默认选中0-男，值与value相匹配 } }, methods: { } }).mount('#app'); </script>复选框checkbox单个checkbox
<body> <div id="app"> <!-- 复选框checkbox --> <!-- 可以用input类型改为checkbox，然后绑定一个布尔值的变量，即可实现双向数据绑定--> <!-- 1、单个 checkbox --> <label for="agree"> <input type="checkbox" id="agree" v-model="is_agree" /> 同意协议 </label> <h2>您选择的是：{{is_agree}}</h2> <button :disabled="!is_agree">下一步</button> </div> </body> <script> // 生命周期函数：在某一时刻会自动执行的函数 const app = Vue.createApp({ data() { return { is_agree: 'false' // 默认不勾选 } }, methods: {} }).mount('#app'); </script>多个checkbox
<body> <div id="app"> <!-- 多个 checkbox --> <input type="checkbox" name="programs_language" value="C" v-model="coding" /> C <input type="checkbox" name="programs_language" value="C++" v-model="coding" /> C++ <input type="checkbox" name="programs_language" value="Python" v-model="coding" /> Python <input type="checkbox" name="programs_language" value="Java" v-model="coding" /> Java <div>您学了哪些编程语言：{{ coding }}</div> </div> </body> <script> // 生命周期函数：在某一时刻会自动执行的函数 const app = Vue.createApp({ data() { return { coding: ['Python'] // 多个checkbox 是数组 } }, methods: {} }).mount('#app'); </script>选择下拉框select
<body> <div id="app"> <!-- select的双向数据绑定 --> <!-- 1、单选select --> <select v-model="city"> <option value="0">北京</option> <option value="1">长沙</option> <option value="2">广州</option> <option value="3">深圳</option> </select> <div> 目前所在城市： <span v-if="city==0">北京</span> <span v-if="city==1">长沙</span> <span v-if="city==2">广州</span> <span v-if="city==3">深圳</span> </div> <!-- 2、多选select --> <select v-model="cities" multiple> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> </select> <div>去过的城市：{{ cities }}</div> </div> </body> <script> // 生命周期函数：在某一时刻会自动执行的函数 const app = Vue.createApp({ data() { return { city: '3', cities: [] }; }, methods: {} }).mount('#app'); </script>v-model指令修饰符、form表单标签修饰符
1）lazy修饰符（懒加载修饰符），input框失去焦点时候会触发刷新数据的变化。
<input v-model.lazy="message"/>
2）number修饰符，可以做类型的转换 ，默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理，如果默认是 string 类型，输入值后 保存到变量中的值是 number 类型 。
<input v-model.number="message" type="number />
3）trim修饰符，就是去掉输入框前后的空格
<input v-model.trim="message"/>
小结：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过JavaScript 在组件的data选项中声明初始值。如代码中给input初始化nit-data但是显示的还是空的，因为data里面给的是空""的。v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：1）text和 textarea 元素使用 value 属性和 input 事件；
2） checkbox 和 radio 使用 checked 属性和 change 事件；
3）select 字段将 value 作为 prop 并将 change 作为事件。
v-model只适用于表单控件中。
Vue案例：实现聊天窗口
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Vue</title> <!-- 直接CDN方式引入vue.js --> <script src=";></script> <style> .talk_container{ width:600px; height:500px; border:1px solid #666; margin:50px auto 0; background:#f9f9f9; } .talk_content{ width:580px; height:420px; border:1px solid #666; background:#fff; margin:10px auto 0; overflow:auto; } .talk_input_main{ width:580px; margin:10px auto 0; } .whotalk{ width:80px; height:30px; float:left; outline:none; } .talk_input{ width:420px; height:26px; padding:0px; float:left; margin-left:10px; outline:none; text-indent:10px; } .talk_btn{ width:56px; height:30px; float:left; margin-left:10px; } .atalk{ margin:10px; } .atalk span{ display:inline-block; background:#0181cc; border-radius:10px; color:#fff; padding:5px 10px; } .btalk{ margin:10px; text-align:right; } .btalk span{ display:inline-block; background:#ef8201; border-radius:10px; color:#fff; padding:5px 10px; } </style></head><body> <div id="root"> <div id="talk_container"> <!-- 显示区域 --> <div class="talk_content"> <div :class="temp.person == '小P' ? 'atalk':'btalk' " v-for="temp in dataArr"> <span>{{temp.person}}说：{{temp.say}}</span> </div> </div> <!-- 发送内容区域 --> <div class="talk_input_main"> <!-- 选项：带有selected的选项，value值和select标签共享--> <select class="whotalk" v-model="selected_opt"> <option value="0">小P说：</option> <option value="1">大P说：</option> </select> <!-- 请输入内容 --> <input type="text" class="talk_input" v-model="input_content" @keydown.enter="sendData"> <!-- 按钮 --> <input type="button" value="发送" class="talk_btn" @click="sendData"> </div> </div> </div></body><script> const app = Vue.createApp({ data() { return { dataArr:[ // 用列表套对象的方式, 保存聊天内容 {"person":"小P", "say":"约吗？" }, {"person":"老P", "say":"约我？可以吗？" }, ], input_content:"", // 保存输入框内容 selected_opt:"0", //选择A说还是B说 } }, methods: { sendData(){ var str3 = this.selected_opt == '0'?'小P':'老P'; //this表示当前实例化对象 var obj = {'person':str3, 'say':this.input_content}; this.dataArr.push(obj) this.input_content=""; document.querySelector(".talk_input").focus(); } } }) const vm = app.mount("#root")</script></html>#VUE#
标签： #mvc绑定下拉框 #vue实现数据绑定 #vue绑定disabled
