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. (2)C++基本类型

    一.整形 short .int. long. long long sizeof查看类型所占的字节数 cout << sizeof(short)<<endl;//2 字节 cou ...

  2. Could not open lock file/var/lib/dpkg/lock的解决

    Could not open lock file/var/lib/dpkg/lock的解决 在ubuntu系统中利用apt-get install something的时候,有时候会出现无法获得锁的权 ...

  3. iframe调用页面中的局部部分

    iframe 调用网页,div遮挡展现局部. <div style=" width:iframe宽度; height:iframe高度; overflow:hidden "& ...

  4. Cococs2d-x学习路线

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. Cocos2D-X推荐书: Cocos2d-x权威指南

  5. jmeter beanshell 变量传递

    如果写成这样会报错: ${__BeanShell(${__threadNum}*2,ToatlAmount)}; ${__BeanShell(${__Random(1,99999,)},DayNum) ...

  6. shell 跟踪命令

    添加跟踪 set -x 去除跟踪 set +x

  7. [Java Performance] 线程及同步的性能之线程池/ThreadPoolExecutors/ForkJoinPool

    线程池和ThreadPoolExecutors   虽然在程序中可以直接使用Thread类型来进行线程操作,但是更多的情况是使用线程池,尤其是在Java EE应用服务器中,一般会使用若干个线程池来处理 ...

  8. python获取港股通每日成交信息

    接口:ggt_daily 描述:获取港股通每日成交信息,数据从2014年开始 限量:单次最大1000,总量数据不限制 积分:用户积2000积分可调取,5000积分无限制,请自行提高积分,具体请参阅本文 ...

  9. Python之lambda && reduce

    lambda类似于C里面的#define或者C++里面的内联函数(inline),一般都小巧精悍 >>> g=lambda x,y:x*y >>> g(3,7) 2 ...

  10. 转帖 使用eclipse创建之前没有创建的web.xml

    由于在下学习Java的时间不长,所以对于一些工具的使用不太熟悉,特别是eclipse,虽然这是一款强大的Java编译工具但是现有汉化版.所以在实际使用的时候难免会遇到各种各样的麻烦.今天就遇到了一个: ...