基本用法

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的更多相关文章

  1. 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. Angularjs-Forms(表单)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Angular表单 input, select, textarea控件都是给用户输入数据 ...

  3. python3之Django表单(一)

    1.HTML中的表单 在HTML种,表单是在<form>...</form>种的元素,它允许用户输入文本,选择选项,操作对象等,然后发送这些数据到服务器 表单元素允许用户在表单 ...

  4. Element Form表单实践(上)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  5. Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件

    一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列.双列.多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创 ...

  6. 好用的表单验证工具 vuelidate

    Vue validation(表单验证)--vuelidate 表单是用户那里收集的数据的工具.如果它没有收集到你需要的数据,或者收集到的数据不对,那么你的表单就没有达到它的目的.这就是为什么我们需要 ...

  7. Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作

    一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...

  8. python运维开发(十九)----Django后台表单验证、session、cookie、model操作

    内容目录: Django后台表单验证 CSRF加密传输 session.cookie model数据库操作 Django后台Form表单验证 Django中Form一般有2种功能: 1.用于做用户提交 ...

  9. 如何使用thinkphp的model来验证前端表单?

    为了增加安全性, 在向model表中写入和修改数据时, 最好是调用 create方法来保证安全, 然后再调用add和save方法: if($Model->Validate($validate)- ...

  10. Rails-Treasure chest3 嵌套表单; Ransack(3900✨)用于模糊查询, ranked-model(800🌟)自订列表顺序; PaperTrail(5000✨)跟踪model's data,auditing and versioning.

    自订列表顺序, gem 'ranked-model' 多步骤表单 显示资料验证错误讯息 资料筛选和搜寻, gem 'ransack' (3900✨); 软删除和版本控制 数据汇出(csv), 自订列表 ...

随机推荐

  1. 24 | 紧跟时代步伐:微服务模式下API测试要怎么做?

  2. 记一次基于Cloudflare服务的爬虫

    前言 前几天有个朋友托我帮忙爬一个网站,第一次打开那个网站时,我去,它竟然就要验证码,不过当时是想加几个header应该就能解决,不过事实证明我还是错了.接下来将记录下爬虫中遇到的一些坑以及解决办法. ...

  3. 设计模式-解释器模式(Interpreter)

    解释器模式是行为型模式的一种.给定一个语言(如由abcdef六个字符组成的字符串集合),定义它的文法的一种表示(S::=abA*ef,A::=cd)并定义一个解释器,解释器使用该表示来解释语言中的句子 ...

  4. HDU 5113:Black And White(DFS)

    题目链接 题意 给出一个n*m的图,现在有k种颜色让你对这个图每个格子染色,每种颜色最多可以使用col[i]次,问是否存在一种染色方案使得相邻格子的颜色不同. 思路 以为是构造题,结果是爆搜.对于每一 ...

  5. Hash碰撞概率

    计算Hash冲突的概率 虽然已经很多可以选择的Hash函数,但创建一个好的Hash函数仍然是一个活跃的研究领域.一些Hash函数是快的,一些是慢的,一些Hash值均匀地分布在值域上,一些不是.对于我们 ...

  6. shiro自定义异常无法被捕获总是抛出AuthenticationException解决方案

    这个问题我也是出的莫名其妙,刚开始好好的,然后配置多realm之后出的. 现在直入主题 在继承了 org.apache.shiro.authc.pam.ModularRealmAuthenticato ...

  7. Flask-登录练习

    基于蓝图CBV模式的登录 使用蓝图并用cbv模式完成登录功能 登录成功后跳转到首页 将session保存在liunx上的redis数据库 使用before_request验证是否是登陆用户 蓝图 fr ...

  8. WinForm控件之【DateTimePicker】

    基本介绍 时间控件应用较为广泛,属性设置项也比较完善是非常好用的控件. 常设置属性.事件 CustomFormat:当Format属性设置为自定义类型时可自定义控件时间的显示格式: Enabled:指 ...

  9. Scrapy爬虫框架与常用命令

    07.08自我总结 一.Scrapy爬虫框架 大体框架 2个桥梁 二.常用命令 全局命令 startproject 语法:scrapy startproject <project_name> ...

  10. springboot3(目录结构)

    2.springboot中的目录结构 1.基本信息 - static :保存所有的静态资源,css.js.img - templates :保存所有的模版页面(springboot内嵌tomcat,默 ...