第五节:表单标签的用法——value绑定和修饰符
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绑定和修饰符的更多相关文章
- Struts2的标签库(五)——表单标签
Struts2的标签库(五) --表单标签 几个特殊的表单标签的使用: 1.checkboxlist标签 该标签用于创建多个复选框,用于同时生成多个<input type="check ...
- SpringMVC:学习笔记(5)——数据绑定及表单标签
SpringMVC——数据绑定及表单标签 理解数据绑定 为什么要使用数据绑定 基于HTTP特性,所有的用户输入的请求参数类型都是String,比如下面表单: 按照我们以往所学,如果要获取请求的所有参数 ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 第七节 认识SpringMVC中的表单标签
所谓成熟,就是:你要习惯,任何人的忽冷忽热:也要看淡,任何人的渐行渐远: --胖先生 SpringMVC的表单标签 回顾: JSTL标签 --C标签 FMT标签 自学:JSP如何自定义标签[开源社区当 ...
- SpringMVC学习记录(五)--表单标签
在使用SpringMVC的时候我们能够使用Spring封装的一系列表单标签,这些标签都能够訪问到ModelMap中的内容. 以下将对这些标签一一介绍. 1.引入标签头文件 在正式介绍SpringMVC ...
- springMVC(7)---表单标签
springMVC(7)---表单标签 form标签作用 简单来讲form表单有两大作用 1:第一就是往后端提交数据或者前端回显 ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- 前端基础-html 列表标签,表格标签,表单标签
一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...
- Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
随机推荐
- java中枚举(enum)小例子。之前学过枚举但是一直没用,这里有个枚举类帮你我理解下(很肤浅)
直接上枚举类,代码简单易懂. package com.jy.modules.cims.data.interact.tbj.loan.request; /** * * @author shengzhou ...
- Tomcat部署遇到的问题
项目服务端:Tomcat6.0.41 选用数据库:Mysql5.6.17 JDK环境:1.6.37 运行系统:Windows server 2008(64bit) ================== ...
- MVC3/4伪静态 jexus mvc伪静态
第一步修改RouteConfig.cs文件 public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute ...
- 如何在两个activity之间传递bitmap
1.需求 在项目开发过程中,打印小票前需要添加打印预览功能,交易数据在打印前转成bitmap然后直接打印,为了显示这个bitmap需要将其传给显示activity. 2.解决方法 把bitmap存储为 ...
- Android--短信
1.Android 提供一系列 API,可以是我们在自己的程序中发送和接收短信: 2.接收短信: 1)当手机接收到一条短信时,系统会发出一条值为 android.provider.Telephony. ...
- centos7.2 默认启动内核修改
总所周知,修改centos6的内核启动顺序,只需要修改/etc/grub.conf 里的default项配置即可.那么centos7系统该如何修改呢? 下面就centos7系统修改内核,做如下记录: ...
- STM32的DMA
什么是DMA?其全称是:Direct Memory Access:根据ST公司提供的相关信息,DMA是STM32中一个独立与Cortex-M3内核的模块,有点类似与ADC.PWM.TIMER等模块:主 ...
- php+mysql+apache+nginx
http://www.cnblogs.com/xiaoluo501395377/archive/2013/04/07/3003278.html 安装mysql rpm -qa | grep mysql ...
- 一个事务复制的bug--更新丢失 续
阅读本文之前请参考http://www.cnblogs.com/stswordman/p/3258897.html 最近又做了一个case,环境是sql server 2008 R2. 客户添加了一个 ...
- 计划参照mysql-proxy编写mssql-proxy
目前使用haproxy做了mssql多个读库的负载均衡,在生产环境中运行得不错. 不过,这个方案有缺点:客户端需要选择是使用读库,还是写库.这样还是不够方便,如果能够实现自动路由就更好了,即让hapr ...