基本用法

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. python算法与数据结构-数据结构中常用树的介绍(45)

    一.树的定义 树是一种非线性的数据结构,是由n(n >=0)个结点组成的有限集合.如果n==0,树为空树.如果n>0,树有一个特定的结点,根结点根结点只有直接后继,没有直接前驱.除根结点以 ...

  2. centos7 中安装 htop

    首先启用 EPEL Repository: yum install -y epel-release 启用 EPEL Repository 后, 可以用 yum 直接安裝 Htop: yum insta ...

  3. Python连载20-偏函数&zip函数&enumerate函数

    一. 偏函数 二. #先举个例子 #把字符串转换为十进制数字 int(') #help(int),int函数中有一个参数base代表把它转换某个进制的数字 #把八进制的字符串转换为十进制 eight ...

  4. MySQL 全文索引实现简单版搜索引擎

    目录 前言 使用 三种类型的全文搜索方式 相关参数 测试innodb引擎使用全文索引 准备 使用默认方式创建全文索引 使用ngram分词解析器创建全文索引 结论 前言 只有Innodb和myisam存 ...

  5. 从微信小程序开发者工具源码看实现原理（一）- - 小程序架构设计

    使用微信小程序开发已经很长时间了,对小程序开发已经相当熟练了:但是作为一名对技术有追求的前端开发,仅仅熟练掌握小程序的开发感觉还是不够的,我们应该更进一步的去理解其背后实现的原理以及对应的考量,这可能 ...

  6. LinkedList源码分析：JDK源码分析系列

    如果本文中有不正确的地方请指出由于没有留言可以在公众号添加我的好友共同讨论. 1.介绍 LinkedList 是线程不安全的,允许元素为null的双向链表. 2.继承结构 我们来看一下LinkedLi ...

  7. NOIP2002 字串变换题解（双向搜索）

    65. [NOIP2002] 字串变换 时间限制:1 s   内存限制:128 MB [问题描述] 已知有两个字串A$, B$及一组字串变换的规则(至多6个规则): A1$ -> B1$ A2$ ...

  8. 【题解】P1892 [BOI2003]团伙-C++

    原题传送门 前置知识:并查集,不会的补了再来. 这道题只是在并查集的基础上多了一个操作而已. 这种操作,叫做反集(就先这么叫着) 题目里有一种关系是互为朋友,这很好理解,把互为朋友的两个点合并就可以了 ...

  9. Lake Counting-C++

    Description Due to recent rains, water has pooled in various places in Farmer John's field, which is ...

  10. Excel公式中问题-记住不要忽略空格！

    总结一下之前犯得愚蠢的小问题: 程序:每日报表:从DB下载数据填充到excel,包括3个sheet,sheet1:总结<模板,公式填充,数据源为sheet2,sheet3>;sheet2: ...