1、表单标签的用法——value绑定和修饰符

value绑定的写法：v-bind:value 或者简写 :value

修饰符: lazy , Number , trim . 用法如：  v-model.lazy

2、使用表单的时候需要注意

  • v-bind:true-value和v-bind:false-value 的两个属性只是用在checkbox上
  • checkbox和radio需要设置初始值的时候，要在v-model绑定的值上直接设置，不要用html标签属性selected。

3、例子详解

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" v-on:click="printValue" value="输出表单的值" />
        <!-- 这样的话，isApple就是true或者false -->
        <input type="checkbox" v-model="isApple" />
        <!-- 这样的话，apple就是a或者b -->
        <input type="checkbox" v-model="apple" v-bind:true-value="a" v-bind:false-value="b" />
        <!-- 这样的话，选中的appleO就是一个对象 ，绑定了对象c-->
        <input type="radio" v-model="appleO" v-bind:value="c">
        <br>
        <!--在第二节：指令的使用（2）中也提到了表单的修饰符-->

        <p>lazy 将input的数据改变发生到change事件中，不添加默认是同步改变的。</p>
        <input type="text" v-model.lazy="appleT" />
        <span>{{appleT}}</span>
        <br>
        <p>trim 自动过滤用户输入的首尾空格</p>
        <input type="text" v-model.trim="appleM" />
        <span>{{appleM}}</span>
        <br>
        <p>自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）</p>

        <input type="text" v-model.Number="appleN" />
        <span>{{typeof appleN}}</span>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            isApple: "",
            apple: "",
            a: "1",
            b: "2",
            c: {
                a: 1
            },
            appleO: "",
            appleT: "",
            appleM: "",
            appleN: ""
        },
        methods: {
            printValue: function() {
                var thisData = this.$data;
                console.log(thisData.isApple);
                console.log(thisData.apple);
                console.log(thisData.appleO);
            }
        }
    });
</script>

</html>

如果本章没有涉及到的您想看的表单知识，请看   第二节：指令的使用（2）

第五节：表单标签的用法——value绑定和修饰符的更多相关文章

  1. Struts2的标签库（五）——表单标签

    Struts2的标签库(五) --表单标签 几个特殊的表单标签的使用: 1.checkboxlist标签 该标签用于创建多个复选框,用于同时生成多个<input type="check ...

  2. SpringMVC:学习笔记(5)——数据绑定及表单标签

    SpringMVC——数据绑定及表单标签 理解数据绑定 为什么要使用数据绑定 基于HTTP特性,所有的用户输入的请求参数类型都是String,比如下面表单: 按照我们以往所学,如果要获取请求的所有参数 ...

  3. 第四节：Vue表单标签和组件的基本用法，父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  4. 第七节 认识SpringMVC中的表单标签

    所谓成熟,就是:你要习惯,任何人的忽冷忽热:也要看淡,任何人的渐行渐远: --胖先生 SpringMVC的表单标签 回顾: JSTL标签 --C标签 FMT标签 自学:JSP如何自定义标签[开源社区当 ...

  5. SpringMVC学习记录(五)--表单标签

    在使用SpringMVC的时候我们能够使用Spring封装的一系列表单标签,这些标签都能够訪问到ModelMap中的内容. 以下将对这些标签一一介绍. 1.引入标签头文件 在正式介绍SpringMVC ...

  6. springMVC(7)---表单标签

    springMVC(7)---表单标签 form标签作用                                     简单来讲form表单有两大作用 1:第一就是往后端提交数据或者前端回显 ...

  7. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  8. 前端基础-html 列表标签,表格标签,表单标签

    一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...

  9. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

随机推荐

  1. 使用ASP.NET MVC操作过滤器记录日志（转）

    使用ASP.NET MVC操作过滤器记录日志 原文地址:http://www.singingeels.com/Articles/Logging_with_ASPNET_MVC_Action_Filte ...

  2. 基于VC的ACM音频编程接口压缩Wave音频（三）

    (三)音 频 数 据 的 压 缩 下 面 说 明 使 用 CODEC 实 现 音 频 压 缩 的 过 程:假 设 源 信 号 为8K 采 样.16bits PCM 编 码. 单 声 道. 长 度 为1 ...

  3. 微信内置浏览器的JS API

    /**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.新的分享接口,包含朋友圈.好友.微博的分享 ...

  4. Android 事件拦截机制一种粗鄙的解释

    对于Android事件拦截机制,相信对于大多数Android初学者是一个抓耳挠腮难于理解的问题.其实理解这个问题并不困难. 首先,你的明白事件拦截机制到底是怎么一回事?这里说的事件拦截机制,指的是对触 ...

  5. 弹层，iframe页面

    前台页面: <img src="chb/老玩家 好礼送.jpg" border="0" width="202" height=&quo ...

  6. 微软正式发布Visual Studio 2013 Update 3 (2013.3) RTM

    昨天微软的Visual Studio 2013 Update 3(Visual Studio 2013.3)正式发布(RTM)了,做为微软认证金牌合作的葡萄城控件,我们组织力量第一时间进行翻译.分享给 ...

  7. Lock-Free 编程

    文章索引 Lock-Free 编程是什么? Lock-Free 编程技术 读改写原子操作(Atomic Read-Modify-Write Operations) Compare-And-Swap 循 ...

  8. [.net 面向对象编程基础] (15) 抽象类

    [.net 面向对象编程基础] (15) 抽象类 前面我们已经使用到了虚方法(使用 Virtual修饰符)和抽象类及抽象方法(使用abstract修饰符)我们在多态一节中说到要实现类成员的重写必须定义 ...

  9. Android 综合揭秘 —— 全面剖释 Service 服务

    引言 Service 服务是 Android 系统最常用的四大部件之一,Android 支持 Service 服务的原因主要目的有两个,一是简化后台任务的实现,二是实现在同一台设备当中跨进程的远程信息 ...

  10. 【译】用jQuery 处理XML--浏览器中的XML与JavaScript

    用jQuery 处理XML--写在前面的话 用jQuery 处理XML-- DOM(文本对象模型)简介 用jQuery 处理XML--浏览器中的XML与JavaScript 用jQuery 处理XML ...