vue之v-model
上一篇文章总结了v-bind的用法，我们发现v-bind实现了数据的单向绑定，将vue实例中的数据同元素属性值进行绑定，今天我们将总结vue中的数据双向绑定v-model。
v-model实现双向绑定主要是通过v-bind绑定一个value属性 ，然后再使用v-on指令给当前元素绑定input事件，下面我们主要总结一下创建的使用方法。
基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<input v-model="message">
<p>{{message}}</p>
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{
message: "hello",
},
})
</script>
</body>
</html>
初始化的时候，我们为message赋值为hello时，input框和p标签中显示的也是该值，随后当我们改变input的value值，p标签中的值随之改变。
v-model.lazy
在上面的例子中，当我们改变input框的value时，p标签的内容立即随之改变，也就是说，在默认情况下， v-model在input事件中同步输入框的值与数据，但可以添加一个修饰符 lazy ，从而转变为在input框失去焦点的时候同步(鼠标移出输入框时，才同步数据)。
<div id="demo">
<input v-model.lazy="mess2" />
<p>mess2 is :{{mess2}}</p>
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{
mess2:'hello',
},
})
</script>
在上面的例子中，因为我们在v-model后面添加了lazy，改变了数据的同步，所以在我们改变输入框中的值的时候，下面input框的值并没有直接改变，而是在鼠标移开后才发生数据同步的。
v-model.number
在input中，有一种type="number"的input，但是在html中，该类型的input中输入的number类型数据最后也会被输出为字符串类型。
<div id="demo">
<div>
type="number"输入框<input v-model="num1" type="number" /><span>{{type1}}<span>
</div>
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{
num1:2,
},
computed:{
type1(){
return typeof(this.num1)
},
}
})
</script>
初始化的时候，获取的是绑定的值，为number类型，但是当input框的value值发生变化时，类型就变为了字符串类型，此时，我们可以添加一个修饰符number给v-model来处理输入值，这样我们就可以获得number类型的数值了。
<div id="demo">
<div>
number修饰符输入<input v-model.number="num2" type="number" /><span>{{type2}}<span>
</div>
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{
num2:''
},
computed:{
type2(){
return typeof(this.num2)
}
}
})
</script>
v-model.trim
在input框中，对用户的输入进行限制是十分重要的，其中最常见的就是去空格了，在vue中，如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入，需要注意的是，该方法只能去除首尾的空格，不能去除中间的空格。
<div id="demo">
<input v-model.trim="mess3">
<p>mess3 is :{{ mess3 }}</p> </div>
<script>
var demo = new Vue({
el:'#demo',
data:{
mess3:''
},
})
</script>
单选框和计算属性使用
<div id="demo">
<input type="text" v-model="a" number>
这个数字加一的结果是{{b}}<br>
<input type="radio" name="sex" v-model="sex" value="男">男
<input type="radio" name="sex" v-model="sex" value="女">女
你的性别是{{sex}} </div>
<script>
var demo = new Vue({
el:'#demo',
data:{
a:"",
sex:'',
},
computed:{
b:function(){
return this.a +1;
}
}
})
</script>
vue之v-model的更多相关文章
- Vue中的model
v-model语法糖: model: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event, 但是一些输入类型比如单选框和复选框按钮可能想使用 ...
- 对于vue绑定的model值里边get和set的小动作
先看下例子: template里边内容: <el-form-item label="导航条类型"> <el-radio-group v-model="n ...
- 4.vue class 绑定- model基础应用
//代码可以复制自行体验 <template> <div id="app" @click.stop="test('你点击了我big- ...
- 第六十二篇：Vue的双向绑定与按键修饰符
好家伙,依旧是vue的基础 1.按键修饰符 假设我们在一个<input>框中输入了12345,我们希望按一下"Esc" 然后删除所有前面输入的内容,这时候,我们会用到按 ...
- vue中动态循环model
vue动态循环model与angular有所不同,angular直接定义一个数组,然后传入循环列表的index即可. 而vue不仅需要定义一个数组,还需要通过接口读出循环的数组长度,然后在create ...
- vue 自定义封装组件 使用 model 选项
自定义组件的 v-model 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框.复选框等类型的输入控件可能会将 value 特性用于不同 ...
- vue.js初级入门之最基础的双向绑定操作
首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...
- 如何用vue实现树形菜单？
在公司培训了2周,布置的作业是从树形,grid分页以及echarts中选一个.由于都不是很熟,就挑了第一个.本来想在网上找找参考,然后模仿着做一个,但是网上的代码多少参差不齐,写到一半没了,所以只要自 ...
- vue组件详解（三）——组件通信
组件之间通信可以用下图表示: 组件关系可分为父子组件通信.兄弟组件通信.跨级组件通信. 一.自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件. 子组件用$emit ()来触发事件,父组件 ...
- 基于Django rest framework 和Vue实现简单的在线教育平台
一.基于api前端显示课程详细信息 1.调整Course.vue模块 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2 ...
随机推荐
- POJ 2751：Seek the Name, Seek the Fame（Hash）
Seek the Name, Seek the Fame Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 24077 Ac ...
- int &p
int &p为引用,而int p为定义变量.二者区别如下:1 引用在定义的时候必须赋值,否则编译会出错.正确的形式为int &p = a;其中a为int型变量.2 引用在定义时不会分配 ...
- （0）diango、ORM的语法
Django PS:Django默认的是sqlite3数据库 PS:settings里面的这里可以修改数据库 1.^ 这个符号就是以什么开头 #url(r'index/',views.index) ...
- hdu3974 Assign the task dfs序+线段树
There is a company that has N employees(numbered from 1 to N),every employee in the company has a im ...
- Java基础三（Scanner键盘输入、Random随机数、流程控制语句）
1.引用类型变量的创建及使用2.流程控制语句之选择语句3.流程控制语句之循环语句4.循环高级 ###01创建引用类型变量公式 * A: 创建引用类型变量公式 * a: 我们要学的Scanner类是属于 ...
- day43 数据库学习egon的博客 视图、触发器、事务、存储过程、函数
一 视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果集当做表来使用. 使用视图我们可以把查询过程中的 ...
- Gravitee.io 架构
Gravitee.io 官方文档提供了几张架构图,通过图我们可以有一个整体的认识. 全局架构 平台架构 参考资料 https://docs.gravitee.io/apim_overview_arch ...
- 【转载】Win10打开U盘提示“文件或目录损坏无法读取”怎么办？
以下文转载至系统之家 网址:http://www.xitongzhijia.net/xtjc/20190314/152334.html (PS:暂未亲测) Win10打开U盘提示“文件或目录损坏无法读 ...
- elasticsearch：shard 和 replica 机制
shard 和 replica 机制: index包含多个shard 每个shard都是一个最小工作单元,承载部分数据,lucene实例,完整的建立索引和处理请求的能力 增减节点时,shard会自动在 ...
- taro 列表渲染
元素的 key 在他的兄弟元素之间应该唯一 数组元素中使用的 key 在其兄弟之间应该是独一无二的.然而,它们不需要是全局唯一的.当我们生成两个不同的数组时,我们可以使用相同的 key key 的取值 ...