基本用法

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. leadcode的Hot100系列--64. 最小路径和--权值最小的动态规划

    如果这个: leadcode的Hot100系列--62. 不同路径--简单的动态规划 看懂的话,那这题基本上是一样的, 不同点在于: 1.这里每条路径相当于多了一个权值 2.结论不再固定,而是要比较不 ...

  2. 【带着canvas去流浪（11）】Three.js入门学习笔记

    目录 一. 资料推荐及建议 二. Three.js中的基本概念 三.重点笔记 四.补充示例 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址: ...

  3. IntelliJ Idea 常用快捷键总结-0 #<间断性更新中...>，部分有示例

    IntelliJ Idea 常用快捷键总结-0 <间断性更新中...>,部分有示例 自动补齐代码 常用的有for循环体,fori可以输出循环语句: eg: public void test ...

  4. vue项目缓存最佳实践

    需求 在开发vue的项目中有遇到了这样一个需求:一个视频列表页面,展示视频名称和是否收藏,点击进去某一项观看,可以收藏或者取消收藏,返回的时候需要记住列表页面的页码等状态,同时这条视频的收藏状态也需要 ...

  5. 走近Java之幕后的String

    前几天,有个同事问了我一个表面看起来显而易见的问题,是关于String的,我们一起来看一下(如果有说的不正确的地方,欢迎大家指正). java中,字面量在编译期计算,并且String字面量作为常量,存 ...

  6. Java底层技术系列文章-线程池框架

    一.线程池结构图    二.示例 定义线程接口 public class MyThread extends Thread { @Override publicvoid run() { System.o ...

  7. kubernetes安装部署-day01

    一.基础环境的准备: 1.1.安装docker: docker的官网是:https://www.docker.com/ 1.1.1.rpm包安装: 官方下载地址:https://download.do ...

  8. ROS中URDF的学习以及与Xacro的比较

    1.urdf与Xacro简单比较 "URDF" 是最初也是比较简单的机器人描述文件,它的结构简单明了,容易理解.但是这也导致当机器人模型变得复杂时,urdf的结构描述就变得冗长,无 ...

  9. 【最短路径之dijkstra（迪杰斯特拉）算法】

    这一章主要介绍最短路径的算法之一,dijkstra算法. 概念 :迪杰斯特拉算法(Dijkstra)是由荷兰计算机科学家狄克斯特拉于1959 年提出的,因此又叫狄克斯特拉算法.是从一个顶点到其余各顶点 ...

  10. weblogic安装时检查监视器: 必须配置为至少显示 256 种颜色，实际空间未知→失败

    1.首先如果你出现的结果是[未通过],则设置DISPLAY环境变量. 按网上方法:export DISPLAY=:0.0 然后继续安装你的东西……若成功则恭喜你~ 若[失败],按网上方法让你去看日志 ...