代码结构

一、     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、修饰符>的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. 聊一聊 .NET高级调试 中的一些内存术语

    一:背景 1. 讲故事 在高级调试的旅程中,经常会有一些朋友问我什么是 工作集(内存),什么是 提交大小,什么是 Virtual Size, 什么是 Working Set ...截图如下: 既然有很 ...

  2. 神经网络入门篇：详解参数VS超参数（Parameters vs Hyperparameters）

    参数 VS 超参数 什么是超参数? 比如算法中的learning rate \(a\)(学习率).iterations(梯度下降法循环的数量).\(L\)(隐藏层数目).\({{n}^{[l]}}\) ...

  3. GitHub、Google等镜像加速地址收集

    摘要 本文用于收集GitHub.Google等镜像/加速地址. GitHub GitHub加速地址一览 fastgithub Https://www.fastgithub.com/(推荐) 站源 地址 ...

  4. 欧奈尔的RPS指标如何使用到股票预测

    前言 1988年,欧奈尔将他的投资理念写成了<笑傲股市How to Make Money in Stocks>.书中总结了选股模式CANSLIM模型,每一个字母都代表一种尚未发动大涨势的潜 ...

  5. 内网& 公网

    内.外网是相对于防火墙而言的,在防火墙内部叫做内网,反之就是外网.在一定程度上外网等同于公网,内网等同于私网. 内网IP是什么? 内网IP简单理解就是局域网IP地址.内网地址即局域网(LAN),内网的 ...

  6. 善用 vscode 的批量和模板技巧来提效

    vs code 其实有很多实用的技巧可以在日常工作中带来很大的提效,但可能是开发中没有相应的痛点场景,因此有些技巧接触的人不多 本篇就来介绍下多光标的批量操作和模板代码两种技巧在日常工作中的提效 涉及 ...

  7. 5.elasticsearch中查询条件

    目录 一.URI查询 指定字段.泛查询 分组和phrase Bool条件 must条件 范围查询 通配符查询 正则表达式 模糊匹配与近似查询 二.RequestBody&DSL ignore_ ...

  8. DVWA File Inclusion（文件包含）全等级

    File Inclusion(文件包含) 目录: File Inclusion(文件包含) 前言 PHP伪协议 1.Low get webshell 本地文件包含 远程文件包含 2.Medium 3. ...

  9. 斯坦福 UE4 C++ ActionRoguelike游戏实例教程 12.认识GamePlayTag， 实现技能的互斥

    斯坦福课程 UE4 C++ ActionRoguelike游戏实例教程 0.绪论 概述 本篇文章对应Lecture 17 - GameplayTags, 67.67节.本文将会讲述UE4中Gamepl ...

  10. 小熊派开发实践丨小熊派+合宙Cat.1接入云服务器

    摘要:使用小熊派开发板,以合宙的AIR724为通信模组(Cat.1),以AT指令方式,通过mqtt协议接入云服务器. 本贴使用小熊派开发板+合宙的Air724(Cat.1模组),接入自己搭建的EMQ服 ...