基本用法

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. charles使用说明（基于mac）

    1. Charles简介 1.1 Charles 需要java的运行环境支持,支持Windows.Mac:Fiddler不支持Mac.故Charles是在Mac下常用的网络封包截取工具. 1.2 Ch ...

  2. centos安装netcat TCP UDP测试工具 简称 nc，安全界叫它瑞士军刀

    centos安装netcat 今天安装swoole后,测试UDP服务需要用到netcat,然而百度了很多安装方法,并没有一个好用的.几经尝试,终于安装成功,现在就分享给大家,以供参考. 配置环境:ce ...

  3. django基础知识之模板继承:

    模板继承 模板继承可以减少页面内容的重复定义,实现页面内容的重用 典型应用:网站的头部.尾部是一样的,这些内容可以定义在父模板中,子模板不需要重复定义 block标签:在父模板中预留区域,在子模板中填 ...

  4. python爬虫登陆问题

    根据腾讯课堂网页登陆问题进行解说(需要安装谷歌浏览器): 1.导入库 import requests from selenium import webdriver 2.根据腾讯课堂链接,进入页面,获取 ...

  5. Leetcode 195 Tenth Line

    Given a text file file.txt, print just the 10th line of the file. Example: Assume that file.txt has ...

  6. nexus私服快速update index方法

    简单搭好nexus私服后,做好基本的配置. 稍微麻烦点的就是让其更新Jar索引文件.如果有耐心的话,完全可以通过在线更新索引的方式来做,但所消耗的时间较长,让人误以为出错了,不知所措. 下面介绍一种简 ...

  7. Spring Boot 2.x （十八）：邮件服务一文打尽

    前景介绍 在日常的工作中,我们经常会用到邮件服务,比如发送验证码,找回密码确认,注册时邮件验证等,所以今天在这里进行邮件服务的一些操作. 大致思路 我们要做的其实就是把Java程序作为一个客户端,然后 ...

  8. 算法与数据结构基础 - 堆(Heap)和优先级队列(Priority queue)

    堆基础 堆(Heap)是具有这样性质的数据结构:1/完全二叉树 2/所有节点的值大于等于(或小于等于)子节点的值: 图片来源:这里 堆可以用数组存储,插入.删除会触发节点shift_down.shif ...

  9. 使用R语言预测产品销量

    使用R语言预测产品销量 通过不同的广告投入,预测产品的销量.因为响应变量销量是一个连续的值,所以这个问题是一个回归问题.数据集共有200个观测值,每一组观测值对应一种市场情况. 数据特征 TV:对于一 ...

  10. linux 安装命令 nginx 部署

    [TOC] # 安装anocanda wget https://repo.anaconda.com/archive/Anaconda3-2019.03-Linux-x86_64.sh安装:bash A ...