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. HTML5: HTML5 Video(视频)

    ylbtech-HTML5: HTML5 Video(视频) 1.返回顶部 1. HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 ...

  2. ceph-报错日志

    由于时钟不一致问题,导致ceph存储有问题 clock skew时钟偏移overalladj. 全部的:全体的:一切在内的stampedadj. 铭刻的:盖上邮戳的:顿足的 beaconvt. 照亮, ...

  3. eclipse中选取一列快捷键

    eclipse中选取一列 比如选中下面的1 4 1   2   3 4   5   6 快捷键 alt+shift+拖动鼠标

  4. find pattern

    daniel@daniel-mint ~/msf/metasploit-framework/tools $ ruby pattern_create.rb 2000 Aa0Aa1Aa2Aa3Aa4Aa5 ...

  5. zabbix--ODBC 监控mysql

    zabbix ODBC 数据库监控ODBC 是 C 语言开发的.用于访问数据库的中间件接口.zabbix 支持查询任何 ODBC 支持的数据库.zabbix 通过调用ODBC 来获取数据库的数据以及数 ...

  6. SpringCloud-技术专区-Hystrix-使用指南

    Maven依赖配置 <dependency> <groupId>org.springframework.cloud</groupId> <artifactId ...

  7. android中读取SD卡上的数据

    通过Context的openFileInput或者openFileOutput打开的文件输入输出流是操作应用程序的数据文件夹里的文件,这样存储的大小比较有限,为了更好的存取应用程序的大文件数据,应用程 ...

  8. 最全的chrome显示www和https方法（全版本）

    78以前的老版本 设置如下参数 chrome://flags/#omnibox-ui-hide-steady-state-url-scheme chrome://flags/#omnibox-ui-h ...

  9. Vs 中的智能提示，默认选中，切换快捷键

    切换是否默认选中,快捷键: Ctrl+Alt+Space(空格)

  10. Arch安装墨刀（产品原型工具）

    Arch通过aur安装墨刀的时候报错,查看PKGBUILD发现下载地址错误("https://s3.cn-north-1.amazonaws.com.cn/modao/download&qu ...