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. js类型问题

    js比较数据一定要记得鉴别类型是否一致,number类型转换string 需要用到toString方法

  2. Linux / Unix Command: rz

    yum install lrzsz Most communications programs invoke rz and sz automatically. You can also connect ...

  3. networkComms 通信框架之 消息处理器

    经常做Tcp通信的朋友知道,客户端发送数据到服务器 或者 服务器发送消息到客户端,接收端都要有相对应的处理器来对消息进行处理. 这里有两个概念 需要进行区别 消息类型 实际的数据类型  这里指的是未被 ...

  4. 在dos中编译java文件

    首先Dos中 编译java文件是:javac (所有)类名.java 运行java文件是:java 包名.类名 java指令默认在寻找class文件的地址是通过CLASSPATH环境变量中指定的目录中 ...

  5. Uva10817_Headmaster's Headache

    大致题意就是: 一个学校招聘人,自带老师m个,n个求职的人,需要讲授s个课程,已经知道了每个人工资,问怎么才能让各科至少有两个老师(自带的必须要) 这题刚看的时候大概知道是要状态转移,可问题是,状态转 ...

  6. Kotlin 和 Flutter 对于开发者究竟意味着什么？

    更多阿里P7架构进阶学习视频:阿里P7Android架构进阶学习视频回放近些年来,编程语言流行度的变化其实不大,在 TIOBE 编程语言排行榜上,Java.C.C++ 固若金山,也就只有 Python ...

  7. netease-cloud-music : 依赖: libqt5x11extras5 (>= 5.1.0) 但是它将不会被安装

    修复一下依赖关系: sudo apt-get install -f #或者:sudo apt-get -f install 上面两条是修复依赖关系(depends)的命令,就是假如你的系统上有某个pa ...

  8. Oracle多种表连接方式

    1. 内连接(自然连接) 2. 外连接 (1)左外连接 (左边的表不加限制) (2)右外连接(右边的表不加限制) (3)全外连接(左右两表都不加限制) 3. 自连接(同一张表内的连接) SQL的标准语 ...

  9. miaosha

    1:跨域请求配置 后端Controller 添加注解 @CrossOrigin(origins = {"*"},allowCredentials = "true" ...

  10. myEclipse 搭建 Spring boot+myBatis+maven 项目流程

    1.新建一个工程 new-->maven project-->next-->next-->在filter中搜索webapp-->group id.Artifact id- ...