基本用法

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. TCP/IP 第三章

    1,ip协议不可靠.无连接特性介绍 不可靠:计算机A往计算机B发送数据报1,若途径的路由器缓存已满,或者ttl(time to live 生存周期)到了,则路由器直接丢弃数据包1,并产生icmp数据包 ...

  2. CentOS7搭建LNMP环境

    以前写的过时了,重新发一篇新的. 安装PHP 下载官网:https://www.php.net/downloads.php 为了方便,我存了现成的 百度网盘:https://pan.baidu.com ...

  3. curl请求的get.post.put.delete对接其他系统接口方法

    class HttpCurl{ //控客云平台的appid private $appId = xxxxxx; //控客云平台的appkey private $appKey = 'xxxxxxxxxxx ...

  4. C++学习书籍推荐《More Exceptional C++(英文)》下载

    百度云及其他网盘下载地址:点我 作者简介 Herb Sutter is the author of three highly acclaimed books, Exceptional C++ Styl ...

  5. 开源SFTP客户端 WinSCP v5.13.5 Build 8967 绿色便携版

    下载地址:点我 基本介绍 WinSCP 是一款可以在微软 Windows 系统环境下使用的支持 SSH 命令的开源图形化 SFTP 客户端工具.同时也支持 SCP 文件传输协议,它的主要功能是在本地与 ...

  6. 聊聊Java String.intern 背后你不知道的知识

    Java的 String类有个有意思的public方法: public String intern() 返回标准表示的字符串对象.String类维护私有字符串池. 调用此方法时,如果字符串池已经包含等 ...

  7. springmvc上传文件踩过的坑

    @RequestMapping("/addTweet") public String addTweet(TweetVO tweetVO, HttpServletRequest re ...

  8. 20141102-微信.NET-笔记

    http://weixin.senparc.com/ 欢迎使用 微信公众平台SDK!     Senparc.Weixin.MP.dll 使用 Senparc.Weixin.MP.dll 整合网站与微 ...

  9. 【POJ - 1995】Raising Modulo Numbers（快速幂）

    -->Raising Modulo Numbers Descriptions: 题目一大堆,真没什么用,大致题意 Z M H A1  B1 A2  B2 A3  B3 ......... AH  ...

  10. Prim算法与Kruskal（没有代码）

    两个最小生成树算法, 都有一个共同的思想: 这棵树是一点一点长大的; 并且每次生长, 都是贪心的. 不同之处是: Kruscal算法是以边为中心的, 每次找最小的并且有用的边添加到树上; Prim算法 ...