vue表单输入绑定

祭出demo
你可以用v-model 指令在表单 <input><textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

基础用法

v-model 会忽略所有表单元素的 valuecheckedselected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
对于需要使用输入法 (如中文、日文、韩文等) 的语言,你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程,请使用 input 事件。

  • 文本

  • 多行文本

  • 复选框

  • 单选按钮

  • 选择框
    如果v-model 表达式的初始值未能匹配任何选项,<select>元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。

值绑定

  • 复选框
    这里的 true-valuefalse-value 特性并不会影响输入控件的value 特性,因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交,(比如“yes”“no”),请换用单选按钮。

  • 单选按钮

  • 选择框的选项

修饰符

  • .lazy

  • .number

  • .trim

执行代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>表单绑定</title>
        <script src="../static/vue.js"></script>
    </head>

    <body>
        <div id="app">

            <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
            <input type="radio" v-model="radioCheck" name="radio" id="radio" value="你选A" />
            <input type="radio" v-model="radioCheck" name="radio" id="radio" value="你选B" />
            <p>{{toggle}}</p>
            <p>{{radioCheck}}</p>

            <select v-model="selected">
                <!-- 内联对象字面量 -->
                <option v-bind:value="{ number: 123 }">123</option>
                <!-- 内联对象字面量 -->
                <option v-bind:value="{ number: 456 }">456</option>
                <!-- 内联对象字面量 -->
                <option v-bind:value="{ number: 789 }">789</option>
            </select>
            <p>{{selected.number}}</p>
            
            <!--.lazy
            在默认情况下,v-model 在每次 input 事件触发后将输入
            框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加
            lazy 修饰符,从而转变为使用 change 事件进行同步:-->
            
            <input v-model.lazy="inputWithLazy" />
            <p>{{inputWithLazy}}</p>
            
            <!--.number
            如果想自动将用户的输入值转为数值类型,可以给 v-model 
            添加 number 修饰符:-->
            <input v-model.number="inputWithNumber" type="number" />
            <p>{{inputWithNumber}}</p>
            <!--.trim
                如果要自动过滤用户输入的首尾空白字符,可以给 v-model
                添加 trim 修饰符:-->
            <input v-model.trim="inputWithTrim" />
            <p>{{inputWithTrim}}</p>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#app",
                data: {
                    toggle: "",
                    radioCheck: "你选A",
                    selected:{
                        number:"",
                    },
                    inputWithLazy:"",
                    inputWithNumber:12,
                    inputWithTrim:"",
                },
            
            })
        </script>
    </body>

</html>

效果如下:


表单输入绑定.png

祭出demo

参考:
vue.js 表单输入绑定

更新时间: 2018-07-20

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、基础用法 你可以用 v-model 指令在表单 及 元素上创建双向数据绑定。它会根据控件类型自动选取正...
    廖马儿阅读 1,167评论 0 0
  • 事件处理 监听事件 可以用v-on指令监听DOM事件,并在触发时运行一些JavaScript代码。 事件处理方法 ...
    oWSQo阅读 934评论 0 1
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 3,373评论 0 25
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,266评论 0 25
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,072评论 0 29