<vue 基础知识 9、v-model使用 input、radio、checkbox、select、修饰符>
代码结构
一、 01-v-model的基本使用
Vue中使用v-model指令来实现表单元素和数据的双向绑定
1、效果
2、代码
01-v-model的基本使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<input type="text" v-model="message" > <input type="password" v-model="pwd" >
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你好',
pwd:''
}
})
</script> </body>
</html>
二、 02-v-model结合radio类型
1、 效果
2、代码
02-v-model结合radio类型.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<label for="male">
<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
<h2>选择的性别是: {{sex}}</h2>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
sex: '女'
}
})
</script> </body>
</html>
三、03-v-model结合checkbox类型
1、效果
2、代码
03-v-model结合checkbox类型.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<h2>爱好是: {{hobbies}}</h2>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
hobbies: []
}
})
</script> </body>
</html>
四、04-v-model结合select类型
1、效果
注：下面的多选框需要按住ctrl多选
2、代码
04-v-model结合select类型.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<!--1.选择一个-->
<select name="abc" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是: {{fruit}}</h2> <!--2.选择多个-->
<select name="abc" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是: {{fruits}}</h2>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
fruit: '香蕉',
fruits: []
}
})
</script> </body>
</html>
五、05-v-model修饰符的使用
1、效果
注：（1）当上面输入时只有光标离开输入框，下面的值才会改变。
（2）只能输入数字
（3）输入的内容去掉前后的空格
2、代码
05-v-model修饰符的使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<!--1.修饰符: lazy-->
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2> <!--2.修饰符: number-->
<input type="number" v-model.number="age">
<h2>{{age}}-{{typeof age}}</h2> <!--3.修饰符: trim-->
<input type="text" v-model.trim="name">
<h2>您输入的名字:{{name}}</h2>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你好啊',
age: 0,
name: ''
}
})
</script> </body>
</html>
<vue 基础知识 9、v-model使用 input、radio、checkbox、select、修饰符>的更多相关文章
- 简单物联网：外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- Postgres 和 MySQL 应该怎么选？
PostgreSQL和MySQL是两个流行的关系型数据库管理系统(DBMS).它们都具有一些相似的功能,但也有一些区别. 在选择使用哪个DBMS时,需要考虑多个因素,包括性能.可扩展性.安全性.功能丰 ...
- HDFS存储原理
冗余数据保存问题: 一个数据块默认被保存三次 好处:1.加快数据传输错误(假如要同时访问数据块1 因为他冗余存储就会有3份 所以会加快数据传输速度) 2.很容易检查数据错误 3.保证数据可靠性 数据的 ...
- 解决OpenCV编译时./bin: error while loading shared libraries: libopencv_highgui.so.3.2: cannot open的问题
1.问题 安装好了opencv后,用其去检测是否可以使用时,出现了如下的问题: 2.解决 参考这篇博文点击 的配置环境即可解决
- 神经网络优化篇：详解梯度检验（Gradient checking）
梯度检验 梯度检验帮节省了很多时间,也多次帮发现backprop实施过程中的bug,接下来,看看如何利用它来调试或检验backprop的实施是否正确. 假设的网络中含有下列参数,\(W^{[1]}\) ...
- 如何从零开始实现TDOA技术的 UWB 精确定位系统(3)
这是一个系列文章<如何从零开始实现TDOA技术的 UWB 精确定位系统>第3部分. 重要提示(劝退说明): Q:做这个定位系统需要基础么?A:文章不是写给小白看的,需要有电子技术和软件 ...
- 五菱宝骏车机升级教程【嘟嘟桌面或ES文件管理器】
文章来源:https://www.djww.net/607.html 简介 越来越多的汽车厂商自研车机系统,其实就是在原来安卓的基础上加入自己的元素,然后禁用某些功能从而实现禁止用户安装第三方app. ...
- C# 查找PDF页面指定区域中的文本并替换和高亮
对PDF文档中的内容进行查找时,可针对文档全篇内容获取查找结果,也可在PDF指定页面中的特定范围内(矩形框区域)进行查找,对获取的查找结果可执行文本高亮或替换等操作,本文将对此作相关介绍(附VB.NE ...
- xpath语法与lxml库详解
xpath语法与lxml库 摘要:本文详细介绍了xpath语法,lxml库的使用以及两者的结合使用 注:平常爬虫运用的Xpath不是来自element中通过Chrome插件XPath Helper写出 ...
- 高性能网络设计秘笈：深入剖析Linux网络IO与epoll
本文分享自华为云社区<高性能网络设计秘笈:深入剖析Linux网络IO与epoll>,作者: Lion Long . 一.epoll简介 epoll是Linux内核中一种可扩展的IO事件处理 ...
- 干了三年的Java，你竟然还不会MySQL性能优化
摘要:MySQL性能优化就算通过合理安排资源,调整系统参数使MySQL运行更快,更节省资源.MySQL性能优化包括查询速度优化,更新速度优化,MySQL服务器优化等等. 前言 MySQL性能优化就算通 ...