v-model的基本使用
例一:
<template><div><h3>v-model</h3><div><input type="text" value="默认值" v-model="firstipt" /><p>{{ firstipt }}</p></div></div>
</template><script>export default{name:"vmodeltest",data(){return{firstipt:"",}}}
</script><style>
</style>
使用v-model可以实现双向数据绑定,如上代码和图片示例,
输入框默认和p标签为空,当输入框输入内容时,p标签在页面上会自动出现输入框输入的内容,
其中v-model可以结合lazy使用,写成v-model.lazy
这样写可以在用户按回车或者失去焦点时,p标签才会被赋予上值,可以减少服务器压力
例二:v-model和lable的结合使用
<template><div><h3>v-model</h3><div><input id="lableid" type="checkbox" value="默认值" v-model="firstipt" /><lable for="lableid">{{firstipt}}</lable></div></div>
</template><script>export default{name:"vmodeltest",data(){return{firstipt:true,}}}
</script><style>
</style>
选中后
没选中
例三:v-model.number
<template><div><h3>v-model</h3><div><input id="lableid" type="number" value="默认值" v-model.number="firstipt" /><p>{{ firstipt }}</p></div></div>
</template><script>export default{name:"vmodeltest",data(){return{firstipt:"",}}}
</script><style>
</style>
使用v-model.number可以让输入框只能输入数字,如果输入其他类型的值,则输入框会自动清除
例三:v-model.trim去除首尾空格
<template><div><h3>v-model</h3><div><input type="text" value="默认值" v-model.trim="firstipt" /><p>{{ firstipt }}</p></div></div>
</template><script>export default{name:"vmodeltest",data(){return{firstipt:"",}},watch:{firstipt(e){console.log(e)}}}
</script><style>
</style>
使用trim可以去除输入框的首尾空格,但不能去除中间的空格
补充,watch:{}是可以对数据进行监听,例上图,当输入框的值改变时,就会打印出结果
v-model的基本使用相关推荐
- 什么是V Model(V模型)
v-model是一种软件生存期模型,由Paul Rook在1980年率先提出的,在1990年出现在英国国家计算中心的出版物中,旨在提高软件开发的效率和有效性,是我们熟知的瀑布模型的一种改进,瀑布模型( ...
- 【全文翻译】ML-Leaks: Model and Data Independent Membership Inference Attacks and Defenses on Machine.....
ML泄漏:基于机器学习模型的模型和数据无关的成员推理攻击与防御 I. INTRODUCTION II. PRELIMINARIES(准备工作) A. Membership Inference Agai ...
- backbone学习总结(二)
今天来看下backbone的路由控制的功能.其实个人感觉backbone,模块就那么几个,熟悉它的框架结构,以及组成,就差不多. 废话不多说,我们来看看还剩下的功能. 关于路由和历史管理 通过 Bac ...
- Backbone学习日记[1]:感性认识
2019独角兽企业重金招聘Python工程师标准>>> 使用backbone.js的意义是什么呢? Backbone将数据呈现为模型, 你可以创建模型.对模型进行验证和销毁,甚至将它 ...
- 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理
系列文章 七天学会ASP.NET MVC (一)--深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)--ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)- ...
- yii 全选 php,yii2中gridview使用技巧小结(四)——全选等批量操作
在用gridview时,大家都注意到了,列表的开头有现成的复选框,这肯定是批量操作中用到的,今天就来介绍一下,gridview中的批量操作,简直简单的不行,效果图如下: 前端页面只需要改这几个地方即可 ...
- 【深度学习】Ivy 开源框架,深度学习大一统时代到来?
它来了,它带着统一主流深度学习框架的接口来了.最近,有一个开源的框架:IVY,它将几个主流的深度学习框架都做了一个统一的封装,包括 PyTorch.TensorFlow.MXNet.Jax 和 Num ...
- ElementUI弹出新增窗口
新建按钮绑定单击事件,对应的处理函数为handleCreate <el‐button type="primary" class="butT" @click ...
- easyui根据select下拉框内容更新表单内容_10、表单与v-model
目标: 学会在 表单类 元素上使用 v-model . v-model作用:用于在 表单类 元素上实现双向绑定. 一.input 和 textarea <div id="app&quo ...
- 【jquery模仿net控件】初步GridView模型实现,及其简单应用
最近日子不好过,主要原因是要毕业了,学校那边的毕业论文让人很头痛,就跟写八股文似的,个人非常头疼并且厌恨这种 对我无意义的东西,哎!!!体制啊,既然无法改变,何不将之做好呢!!!对,于是我还是不想写论 ...
最新文章
- 从java到c_Binder机制,从Java到C (4. Parcel)
- centos7 docker-compose安装_Docker Compose 搭建 Redis Cluster 集群环境
- [Angularjs]视图和路由(三)
- JVM 调优实战--可视化GC日志分析工具GC Easy使用教程
- emolg模板PHP7,PHP7下安装Emlog5.3.1的笔记
- import pycharm setting_Pycharm不能正常使用的常见问题
- flash as3鼠标左右拖动元件
- Linux安装Django
- 软件技术方案_广东省汕尾市海丰陈氏数字化网络化全县族谱统修工作方案(草案)...
- 八月十一上午笔记钊哥第一节课
- Android大话设计模式 第一章----针对接口编程---问世间情为何物 直教人生死相许
- PHP的数据类型主要有三大类八小类。
- 程序猿头头:数组应用(indexOf,includes,find,findindex)
- 3的16次方用计算机怎么算,excel2016次方公式怎么用
- 上市前夕离场,阿里巴巴合伙人胡喜6月卸任CTO,近日正式离职
- ccd视觉定位教程_什么是CCD视觉定位自动焊锡机器人?
- java万年历方法_利用java制作万年历
- 用python-webdriver实现自动填表
- 2018成都蚂蚁金服两年前端社招面经
- 七:策略模式(不同等级会员打折算法)