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. 96、搬家到csdn

    大家好: 今天开始会将所有的博客搬家到CSDN,以后请参考CSDN上的博客:http://blog.csdn.net/u012416045 谢谢 维真

  2. Reactor 反应堆设计模式

    为了应对高并发的服务器端开发,微软在2009年提出了一种更优雅地实现异步编程的方式Reactive Programming即反应式编程.随后其他技术紧随其后,比如ES6通过引入类似的异步编程方式等. ...

  3. python 包管理工具 pip 的配置

    近几年来,python的包管理系统pip 越来越完善, 尤其是对于 windows场景下,pip大大改善了python的易用性. https://www.cnblogs.com/yvivid/p/pi ...

  4. 自定义input[type="radio"]

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 对单选按钮自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :c ...

  5. JS提示信息来检测相应id的标签

    2015-07~2015-08 (其中$为document.getElementById()) 使用span提示信息来检测相应id的标签,没有返回值 infoTips("LRYH" ...

  6. Caused by: java.util.MissingResourceException: Can't find bundle for base name javax.servlet.LocalStrings, locale zh_CN

    这个是很早以前的一个bug了,最近开始用idea发现追源码相当方便,于是结合网上的解决方案以及自己的判断追踪一下原因,当然没有深究,只是根据提示一直追而已:先说一下解决方案: <dependen ...

  7. Django rest_framework 自动生成接口文档

    自动生成接口文档 REST framework可以自动帮助我们生成接口文档. 接口文档以网页的方式呈现. 自动接口文档能生成的是继承自APIView及其子类的视图. 1. 安装依赖 REST fram ...

  8. c# DataTable join 两表连接

    转:https://www.cnblogs.com/xuxiaona/p/4000344.html JlrInfodt和dtsource是两个datatable,通过[姓名]和[lqry]进行关联 v ...

  9. 2018-2-13-win10-uwp-资源字典

    title author date CreateTime categories win10 uwp 资源字典 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...

  10. 在Ubuntu下安装source Insight

    在ubuntu中,安装windows程序用wine,然后用wine安装windows软件即可. 安装wine sudo apt-get install wine 下载sourceinsight的exe ...