表单与v-model
基本用法
vue.js提供了v-model指令,用于在表单类元素上双向绑定数据,例如在输入框上使用,输入的内容会实时映射到绑定的数据上
example1:修改input框内容,message会实时渲染
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>exmaple</title>
<link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
<input type="text" v-model="message">
<p>输入的内容是{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
js
var app = new Vue({
el: "#app",
data : {
message: ''
}
});
example2:单选按钮
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example2</title>
<link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
<input type="radio" v-model="picked" value="HTML" id="html">
<label for="html">HTML</label>
<br>
<input type="radio" v-model="picked" value="JS" id="js">
<label for="js">JS</label>
<br>
<input type="radio" v-model="picked" value="CSS" id="css">
<label for="css">CSS</label>
<br>
<p>选择的项是{{ picked }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
js
var app = new Vue({
el: "#app",
data : {
picked:'js'
}
});
example3:多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example2</title>
<link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
<input type="checkbox" v-model="checked" value="HTML" id="html">
<label for="html">HTML</label>
<br>
<input type="checkbox" v-model="checked" value="JS" id="js">
<label for="js">JS</label>
<br>
<input type="checkbox" v-model="checked" value="CSS" id="css">
<label for="css">CSS</label>
<br>
<p>选择的项是{{ checked }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
js
var app = new Vue({
el: "#app",
data : {
checked:['JS','HTML']
}
});
example4:选择框
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example2</title>
<link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
<select v-model="selected" multiple>
<option>html</option>
<option>js</option>
<option>css</option>
</select>
<p>选择的项是{{ selected }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
js
var app = new Vue({
el: "#app",
data : {
selected: ['html','css']
}
});
此时v-model绑定的是一个数组
实际业务中,option通过v-for动态生成,value和text通过v-bind动态生成
example4可以修改一下
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example2</title>
<link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
<select v-model="selected">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
<p>选择的项是{{ selected }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
js
var app = new Vue({
el: "#app",
data : {
selected: 'html',
options:[
{
text:'html',
value:'html',
},
{
text:'js',
value:'js',
},
{
text:'css',
value:'css'
}
]
}
});
修饰符
.lazy
数据双向绑定不是实时生效的,失焦或者回车才改变
<input type="text" v-model.lazy="message">
.number
输入的字符串转数字
<input type="text" v-model.number="message">
.trim
自动过滤输入的首位空格
<input type="text" v-model.trim="message">
表单与v-model的更多相关文章
- 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Angularjs-Forms(表单)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Angular表单 input, select, textarea控件都是给用户输入数据 ...
- python3之Django表单(一)
1.HTML中的表单 在HTML种,表单是在<form>...</form>种的元素,它允许用户输入文本,选择选项,操作对象等,然后发送这些数据到服务器 表单元素允许用户在表单 ...
- Element Form表单实践(上)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件
一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列.双列.多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创 ...
- 好用的表单验证工具 vuelidate
Vue validation(表单验证)--vuelidate 表单是用户那里收集的数据的工具.如果它没有收集到你需要的数据,或者收集到的数据不对,那么你的表单就没有达到它的目的.这就是为什么我们需要 ...
- Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作
一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...
- python运维开发(十九)----Django后台表单验证、session、cookie、model操作
内容目录: Django后台表单验证 CSRF加密传输 session.cookie model数据库操作 Django后台Form表单验证 Django中Form一般有2种功能: 1.用于做用户提交 ...
- 如何使用thinkphp的model来验证前端表单?
为了增加安全性, 在向model表中写入和修改数据时, 最好是调用 create方法来保证安全, 然后再调用add和save方法: if($Model->Validate($validate)- ...
- Rails-Treasure chest3 嵌套表单; Ransack(3900✨)用于模糊查询, ranked-model(800🌟)自订列表顺序; PaperTrail(5000✨)跟踪model's data,auditing and versioning.
自订列表顺序, gem 'ranked-model' 多步骤表单 显示资料验证错误讯息 资料筛选和搜寻, gem 'ransack' (3900✨); 软删除和版本控制 数据汇出(csv), 自订列表 ...
随机推荐
- 24 | 紧跟时代步伐:微服务模式下API测试要怎么做?
- 记一次基于Cloudflare服务的爬虫
前言 前几天有个朋友托我帮忙爬一个网站,第一次打开那个网站时,我去,它竟然就要验证码,不过当时是想加几个header应该就能解决,不过事实证明我还是错了.接下来将记录下爬虫中遇到的一些坑以及解决办法. ...
- 设计模式-解释器模式(Interpreter)
解释器模式是行为型模式的一种.给定一个语言(如由abcdef六个字符组成的字符串集合),定义它的文法的一种表示(S::=abA*ef,A::=cd)并定义一个解释器,解释器使用该表示来解释语言中的句子 ...
- HDU 5113:Black And White(DFS)
题目链接 题意 给出一个n*m的图,现在有k种颜色让你对这个图每个格子染色,每种颜色最多可以使用col[i]次,问是否存在一种染色方案使得相邻格子的颜色不同. 思路 以为是构造题,结果是爆搜.对于每一 ...
- Hash碰撞概率
计算Hash冲突的概率 虽然已经很多可以选择的Hash函数,但创建一个好的Hash函数仍然是一个活跃的研究领域.一些Hash函数是快的,一些是慢的,一些Hash值均匀地分布在值域上,一些不是.对于我们 ...
- shiro自定义异常无法被捕获总是抛出AuthenticationException解决方案
这个问题我也是出的莫名其妙,刚开始好好的,然后配置多realm之后出的. 现在直入主题 在继承了 org.apache.shiro.authc.pam.ModularRealmAuthenticato ...
- Flask-登录练习
基于蓝图CBV模式的登录 使用蓝图并用cbv模式完成登录功能 登录成功后跳转到首页 将session保存在liunx上的redis数据库 使用before_request验证是否是登陆用户 蓝图 fr ...
- WinForm控件之【DateTimePicker】
基本介绍 时间控件应用较为广泛,属性设置项也比较完善是非常好用的控件. 常设置属性.事件 CustomFormat:当Format属性设置为自定义类型时可自定义控件时间的显示格式: Enabled:指 ...
- Scrapy爬虫框架与常用命令
07.08自我总结 一.Scrapy爬虫框架 大体框架 2个桥梁 二.常用命令 全局命令 startproject 语法:scrapy startproject <project_name> ...
- springboot3(目录结构)
2.springboot中的目录结构 1.基本信息 - static :保存所有的静态资源,css.js.img - templates :保存所有的模版页面(springboot内嵌tomcat,默 ...