VUE之v-model指令
2021-01-10 22:18
681 查看
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>v-bind命令</title> <script src="js/vue.min.js"></script> <style> .gray{ background: #444; color: #eee; } .red{background: #f00;} </style> </head> <body> <!--布局--> <div id="vue_bind"> <label for="ck">修改颜色</label> <input type="checkbox" v-model="gray" id="ck" /> <br /><br /> <div v-bind:class="{'gray':gray}"> v-bind:class指令 </div> </div> <!--js代码--> <script> new Vue({ el:'#vue_bind', data:{ gray:false } }); </script> </body></html>
这段代码是菜鸟教程上标注v-vind的。
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 gray的值,如果为 true 使用 gray类的样式,否则不使用该类。但是什么是v-model呢?并没有给出提示。
该案例效果,点击复选框前:
点击复选框后:
下面针对v-model重点讲解下,再说v-bind。
1. 指令释义
v-model在表单控件或者组件上创建双向绑定,本质上是负责监听用户的输入事件(onchange,onkeyup,onkeydown等,具体是哪个,还请查阅官方底层实现文档)以更新数据,并对一些极端场景进行一些特殊处理。针对表单元素进行操作。
在该案例基础上变为一个输入的框的v-model,起始效果:
在输入其他字符后后面的效果同步变化:
使用v-model时,如果是用中文输入法输入中文,一般在没有选定词组前,也就是在拼音阶段,Vue是不会更新数据的,当敲下汉字时才会触发更新。如果希望总是实时更新,可以用@input代替v-model。事实上,v-model也是一个特殊的语法糖,只不过它会在不同的表单上智能处理。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>v-model案例二</title> <script src="js/vue.min.js"></script> </head> <body> <!--布局--> <div class="model2"> <input type="text" @input="handleInput" placeholder="请输入..." /> <p>输入的内容是:{{message}}</p> </div> <!--js代码--> <script> var vm2=new Vue({ el:'.model2', data:{message:'model汉字案例'}, methods:{ handleInput:function(e){ this.message=e.target.value; } } }); </script> </body></html>
单选按钮在单独使用时,不需要v-model,直接使用v-bind绑定一个布尔类型的值,为真时选中,为假时不选。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>v-model案例单选按钮</title> <script src="js/vue.min.js"></script> </head> <body> <!--布局--> <div class="model3"> <input type="radio" name="" id="btn1" value="" :checked="picked" /> <label for="btn1">单选按钮</label> <input type="radio" name="" id="btn2" value="" :checked="false" /> <label for="btn2">单选按钮2</label> </div> <!--js代码--> <script> var model3=new Vue({ el:'.model3', data:{ picked:false } }); </script> </body></html>
如果是组合使用来实现互斥选择效果,就需要v-model配合value来使用:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>model4的效果</title> <script src="js/vue.min.js"></script> </head> <body> <!--布局--> <div class="model4"> <input type="radio" name="" id="html5" value="html5" v-model="picked" /> <label for="html5">HTML5</label><br /> <input type="radio" name="" id="css3" value="css3" v-model="picked" /> <label for="html5">CSS3</label><br /> <input type="radio" name="" id="js" value="js" v-model="picked" /> <label for="html5">js</label><br /> <p>选择的项是:{{picked}}</p> </div> <!--js代码--> <script> var model4=new Vue({ el:'.model4', data:{picked:'js'} }); </script> </body></html>
点击CSS3 会显示第二个选择项。
相关文章推荐
- 从vue.js的源码分析,input和textarea上的v-model指令到底做了什么
- 【Vue】零基础学习Vue: 第9课 Vue的 v-model指令,设置input表单输入的方法:
- vue2.0——v-model指令
- vue.js使用v-model指令实现的数据双向绑定功能示例
- vue学习笔记(五)【vue中的基本指令(二)v-model】实现简易计算器、全选反选功能
- Vue-指令 v-text v-html v-model v-bind
- vue2.0——v-model指令
- 浅谈 Vue v-model指令的实现原理 - 如何利用v-model设计自定义的表单组件
- vue2.0——v-model指令
- vue的常用指令之 v-model
- vue2.0——v-model指令
- Vue常用指令_V-model
- 浅谈 Vue v-model指令的实现原理
- vue2.0——v-model指令
- 说说 Vue.js 中的 v-model 指令以及如何绑定表单元素
- Vue教程04(v-model指令介绍)
- Vue双向数据绑定:v-model指令
- vue2.0——v-model指令
- vue.js指令v-model使用方法
- Vue学习 双向数据绑定与v-model指令用法