Vue 中文文档 https://cn.vuejs.org/

不多说，直接上干货。

v-model 指定，用来在input textarea 等表单元素上创建双向数据绑定，负责监听用户的输入事件，以及更新数据。

1. 文本绑定：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="" id="form1">

<input type="text" v-model="message">

<h3>{{message}}</h3>

</form>

<script src="../lib/vue.js"></script>

<script !src="">

    var Vue = new Vue({

        el: "#form1",

        data: {

            message: ""

        }

    })

</script>

</body>

</html>

　　

input中更改文本，h3 里也会相应更改。

2.复选框：

<form action="" id="form1">

    <label>

        Jack:<input type="checkbox" value="Jack" v-model="checkedNames">

    </label>

    <label>

        John:<input type="checkbox" value="John" v-model="checkedNames">

    </label>

    <label>

        Mike:<input type="checkbox" value="Mike" v-model="checkedNames">

    </label>

    <br>

    <span>{{checkedNames}}</span>

</form>

<script src="../lib/vue.js"></script>

<script !src="">

    var Vue = new Vue({

        el: "#form1",

        data: {

            checkedNames: []

        }

    })

</script>

　　多个复选框，绑定到同一个数组，选中，则数组添加该项，反之，则数组删除该项。

3.单选框：

<form action="" id="form1">

    <label for="">

        boy: <input type="radio" v-model="sex" value="boy">

    </label>

    <label for="">

        girl: <input type="radio" v-model="sex" value="girl">

    </label>

    <br>

    <span>{{sex}}</span>

</form>

<script src="../lib/vue.js"></script>

<script !src="">

    var Vue = new Vue({

        el: "#form1",

        data: {

          sex:""

        }

    })

</script>

　　

用v-model来代替原本的name即可。

4.选择框：

<form action="" id="form1">

    <select v-model="selected">

        <option disabled value="">请选择</option>

        <option>A</option>

        <option>B</option>

        <option>C</option>

    </select>

    <br>

    <span>Selected: {{ selected }}</span>

</form>

<script src="../lib/vue.js"></script>

<script !src="">

    var Vue = new Vue({

        el: "#form1",

        data: {

            selected:""

        }

    })

</script>

　　

当然，我们要给option，id值，而此时，我们给data中的selected赋值某一option项的id值，则默认选中此项

<form action="" id="form1">

    <select v-model="selected">

        <option disabled value="">请选择</option>

        <option value="A">A</option>

        <option value="B">B</option>

        <option value="C">C</option>

    </select>

    <br>

    <span>Selected: {{ selected }}</span>

</form>

<script src="../lib/vue.js"></script>

<script !src="">

    var Vue = new Vue({

        el: "#form1",

        data: {

            selected: "B"

        }

    })

</script>

　　使用v-for 动态渲染：

<form action="" id="form1">

    <select v-model="selected">

        <option  v-for="option in options" :value="option.value">

            {{option.text}}

        </option>

    </select>

    <br>

    <span>Selected: {{ selected }}</span>

</form>

<script src="../lib/vue.js"></script>

<script !src="">

    var Vue = new Vue({

        el: "#form1",

        data: {

            selected:"C",

            options: [

                {

                text: "One", value: "A",

                }, {

                text: "Two", value: "B",

                }, {

                text: "Three", value: "C",

                }]

        }

    })

</script>

　　

三种修饰符：

.lazy：在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->

<input v-model.lazy="msg" >

.number：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

.trim：如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

Vue 学习笔记之 —— 表单输入绑定的更多相关文章

  1. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

  2. Vue.js学习笔记--3.表单输入绑定

    整理自官网教程 -- https://cn.vuejs.org/ 利用v-model可以实现表单元素的value与后台数据的双向绑定,具体用法如下: <!--文本--> <input ...

  3. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  4. VUE：事件处理和表单输入绑定

    事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  5. Vue（10）表单输入绑定v-model

    v-model v-model指定可以实现表单值与属性的双向绑定.即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值 绑定的属性和事件 v-model在内部为不同的输入元 ...

  6. Vue学习笔记之表单绑定输入

    vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...

  7. vue - 计算属性、表单输入绑定

    计算属性 computed:{} <!DOCTYPE html> <html> <head> <title></title> </he ...

  8. No.4一步步学习vuejs之表单输入绑定

    基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以 ...

  9. Blazor和Vue对比学习（基础1.9）：表单输入绑定和验证，VeeValidate和EditFrom

    这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...

随机推荐

  1. Web RTC + audio API 实现录音，并压缩

    <button onclick="record()">开始录音</button> <button onclick="stopRecord() ...

  2. 数据可视化----matplotlib.pylot

    一.输入具体数 plt.plot([3,1,4,5,2]) #自动生成y轴 plt.ylabel("Grade") #y轴的标签 plt.savefig('test1',dpi=6 ...

  3. spring data jpa 关联设计

    MAP关联实体 // @ElementCollection @OneToMany(cascade = {CascadeType.ALL})// @JoinColumn(name = "the ...

  4. Tomcat启动脚本（2）catalina.bat

    @echo off rem Licensed to the Apache Software Foundation (ASF) under one or more rem contributor lic ...

  5. Queue与Deque的区别

    前言 ​ 在研究java集合源码的时候,发现了一个很少用但是很有趣的点:Queue以及Deque,平常在写leetcode经常用LinkedList向上转型Deque作为栈或者队列使用,但是一直都不知 ...

  6. SqlServer 跨库访问

    同实例跨库 只需要 库名.dbo.表 dbo可省略 如: use Test select * from rdrecords select * from oa.dbo.UserInfo 不同实例与不同i ...

  7. cas4.2.7 集群服务搭建

    cas服务端集群,网上资料很多,无非就是session共享,ticket共享. 但是session共享是必须的吗?或者能实现集群吗? 实践: 1. ticket共享,直接上代码 package org ...

  8. CentOs如何找回root密码

    当CentOs的root密码忘了的时候,可以进入单用户模式,更改一下root密码就可以了. 具体操作如下 1.重启Linux后,在此界面,3秒内按下回车键 2.出现此界面 3.按e键,进入下图,然后把 ...

  9. iptables 防火墙（下）

    iptables 防火墙(下) 1. 常见的隐含匹配条件: 1.1 端口匹配: --sport 源端口.--dport 目的端口 1.2 TCP标记匹配: -tcp-flags 检查范围被设置的标记 ...

  10. 前端，用js根据一个对象，去除另个对象中重复的元素

    这里的应用场景是,两个div盛放待选项目和已选项目,如下图 <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> < ...