基本用法

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. tar命令压缩和解压

    https://www.cnblogs.com/jyaray/archive/2011/04/30/2033362.html tar命令详解 -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向 ...

  2. Oracle Awr报告_生成

    AWR的概念 Oracle数据库是一个使用量很多的数据库,关于Oracle数据库的性能.Oracle10g以后,Oracle提供了一个性能检测的工具:AWR(Automatic Workload Re ...

  3. spring源码深度解析— IOC 之 属性填充

    doCreateBean() 主要用于完成 bean 的创建和初始化工作,我们可以将其分为四个过程: createBeanInstance() 实例化 bean populateBean() 属性填充 ...

  4. 使用SpringSecurity搭建授权认证服务(1) -- 基本demo认证原理

    使用SpringSecurity搭建授权认证服务(1) -- 基本demo 登录认证是做后台开发的最基本的能力,初学就知道一个interceptor或者filter拦截所有请求,然后判断参数是否合理, ...

  5. 仿写一个简陋的 IOC/AOP 框架 mini-spring

    讲道理,感觉自己有点菜.Spring 源码看不懂,不想强行解释,等多积累些项目经验之后再看吧,但是 Spring 中的控制反转(IOC)和面向切面编程(AOP)思想很重要,为了更好的使用 Spring ...

  6. SpringBoot 的过滤器

    在Springboot里面读封装的一些常用的API,当然对过滤器也不类外了. 首先讲下Spring中的AOP的理解: AOP不是一种具体的技术,而是一种编程思想.在面向对象编程的过程中,我们很容易通过 ...

  7. MQ初窥门径【面试必看的Kafka和RocketMQ存储区别】

    MQ初窥门径 全称(message queue)消息队列,一个用于接收消息.存储消息并转发消息的中间件 应用场景 用于解决的场景,总之是能接收消息并转发消息 用于异步处理,比如A服务做了什么事情,异步 ...

  8. 玩转SpringBoot之整合Mybatis拦截器对数据库水平分表

    利用Mybatis拦截器对数据库水平分表 需求描述 当数据量比较多时,放在一个表中的时候会影响查询效率:或者数据的时效性只是当月有效的时候:这时我们就会涉及到数据库的分表操作了.当然,你也可以使用比较 ...

  9. 嵊州D4T2 硬币 有人来教教我吗！

    嵊州D4T2 硬币 [问题描述] 卡拉赞的展览馆被入侵了. 展览馆是一条长长的通道,依次摆放着 n 个展柜(从西到东编号依次 为 1—n). 入侵者玛克扎尔在第 n 个展柜东边召唤了一个传送门,一共施 ...

  10. JAVA面试题 浅析Java中的static关键字

    面试官Q1:请说说static关键字,你在项目中是怎么使用的? static 关键字可以用来修饰:属性.方法.内部类.代码块: static 修饰的资源属于类级别,是全体对象实例共享的资源: 使用 s ...