【Vue】零基础学习Vue: 第9课 Vue的 v-model指令,设置input表单输入的方法:
2019-06-28 18:29
786 查看
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </head> <body> <div id="app"> <!-- v-model 输入框输入时时触发 将输入的值存放属性a中--> <input type="text" v-model="a">v-model输入时时触发<br> <!-- .lazy 输入框失去焦点时触发 --> <input type="text" v-model.lazy="a">lazy输入框失去焦点时触发<br> <!-- .number 输入框只能输入数字 --> <input type="text" v-model.number="a">number输入框只能输入数字<br> <!-- .trim 输入框只能输入数字 --> <input type="text" v-model.trim="a">trim输入框只能输入数字<br> <!-- 修饰符可同时使用 只能输入数字,前后无空格,失去焦点时触发--> <input type="text" v-model.number.trim.lazy="a">只能输入数字,前后无空格,失去焦点时触发 </div> <script> let vm = new Vue({ el:"#app", data:{ a:1, } }) </script> </body> </html>
相关文章推荐
- Vue学习1-1.基础语法;2.指令:表单输入绑定,文本渲染;3.组件:定义组件,使用组件
- 5.2.vue入门基础学习笔记-基础指令介绍(表单绑定v-model)
- Vue.js 中的 v-model 指令及绑定表单元素的方法
- vue基础 学习之v-model (表单控件绑定)
- 【Vue】零基础学习Vue: 第17课 Vue的v-bind指令使用与设置及改变标签样式
- 几种设置表单元素中文本输入框不可编辑的方法总结
- jQuery获取及设置表单input各种类型值的方法小结
- 利用ngModel相关属性及方法自定义表单验证指令
- html表单基础之输入学习笔记
- Android之设置EditText输入类型(setInputType()方法和android:inputType属性)
- Vue.js实例学习:表单输入绑定
- 【Vue】零基础学习Vue: 第24课 Vue子组件触发父主件方法并传递参数:子组件$emit发射事件
- HTML&CSS基础学习笔记1.24-input标签重置表单
- 从vue.js的源码分析,input和textarea上的v-model指令到底做了什么
- vue学习第2天,基础知识,v-bind v-on v-if v-for v-model v-html computed watch methods
- html表单基础之输入学习笔记
- Vue学习基础之page指令
- Vue.js基础学习---set/get方法
- vue学习第4天,表单输入绑定 组件
- wince 5.0 eVC 4.0设置输入方法IM Input Method或者输入面板的位置