<template>
<div id="app">
<input type="checkbox" id="checked" v-model="checked"/>
<label for="checked">{{checked}}</label><br />
<input type="checkbox" id="jack" value="jack" v-model="names" />
<label for="jack">jack</label>
<input type="checkbox" id="sim" value="sim" v-model="names" />
<label for="sim">sim</label>
<input type="checkbox" id="tom" value="tom" v-model="names" />
<label for="tom">tom</label>
<input type="checkbox" id="mei" value="mei" v-model="names" />
<label for="mei">mei</label>
<p>{{names}}</p>
<input type="radio" id="male" value="male" v-model="gender" />
<label for="male">male</label>
<input type="radio" id="female" value="female" v-model="gender" />
<label for="female">female</label>
<p>{{gender}}</p>
<select name="choose" id="choose" v-model="choose">
<option value="" disabled="">please select</option>
<option value="grade one">grade one</option>
<option value="grade two">grade two</option>
<option value="grade third">grade third</option>
</select>
<p><label for="choose">{{choose}}</label></p>
</div>
</template> <script>
export default {
name: 'app',
data() {
return {
checked : false,
names : [],
gender : "",
choose : "",
}
}
} </script>

vue学习笔记三:常见的表单绑定的更多相关文章

  1. Django学习笔记(五)—— 表单

    疯狂的暑假学习之  Django学习笔记(五)-- 表单 參考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path         ...

  2. Vue.js 学习笔记 第6章 表单与v-model

    本篇目录: 6.1 基本用法 6.2 绑定值 6.3 修饰符 表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业 ...

  3. Flutter学习笔记(13)--表单组件

    如需转载,请注明出处:Flutter学习笔记(13)--表单组件 表单组件是个包含表单元素的区域,表单元素允许用户输入内容,比如:文本区域,下拉表单,单选框.复选框等,常见的应用场景有:登陆.注册.输 ...

  4. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  5. Bootstrap学习笔记系列3-------Bootstrap简单表单显示

    表单布局 垂直或基本表单 基本的表单结构时BootStrap自带的,创建基本表单的步骤如下: 向父<form>元素添加role = "form": 为了获取最佳的间距, ...

  6. ng2 学习笔记(二)表单及表单验证

    在上一篇文章中提到了表单,只说了表单的数据绑定,这一篇文章主要讲一下表单验证,为什么把表单单独拿出来学习,主要是因为,表单是商业应用的支柱,我们用它来执行登录.求助.下单.预订机票.安排会议,以及不计 ...

  7. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

  8. Jquery学习笔记:操作form表单元素之一(文本框和下拉框)

    一.概述 在web页面开发中,经常需要获取和设置表单元素的值(如文本框中的内容),特别是在ajax应用中,更是常态.本文系统的介绍下如何操作. 同操作其它html元素一样,操作的过程差不多. 第一步, ...

  9. Django学习笔记(3)——表单,测试和模板语法的学习

    一,表单form 为了接收用户的投票选择,我们需要在前段页面显示一个投票界面,让我们重写之前的polls/detail.html文件,代码如下: <h1>{{ question.quest ...

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

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

随机推荐

  1. Kinect 开发 —— 显示骨骼用户插件

    public partial class SkeletonViewer : UserControl { private readonly Brush[] _SkeletonBrushes = new ...

  2. JS面向对象:

    面向对象:--JS系统对象也是基于原型的程序--不要修改或者添加系统对象下面的方法和属性eg: var arr = [1,2,3]; Array.prototype.push = function() ...

  3. android 自己定义View之SubmitView

    转载请注明出处:王亟亟的大牛之路 近期看了一大堆的自己定义View多数都能够充当耗时操作的交互界面.再接再厉再传一个SubmitView.一个和可用于模仿提交等待与用户交互用的一个自己定义View 效 ...

  4. bug 7715339 登录失败触发 ‘row cache lock’ 等待

    Bug 7715339 - Logon failures causes "row cache lock" waits - Allow disable of logon delay ...

  5. UVA - 10167 - Birthday Cake (简单枚举)

    思路:简单枚举 AC代码: #include <cstdio> #include <cstring> #include <iostream> #include &l ...

  6. TCP/IP图解学习总结(二)

    注意:这里的第n层是依照OSI协议来的 I   网桥--2层交换机.数据链路层面上链接两个网络的设备.它可以识别数据链路层中的数据帧. II  路由器-3层交换机.网络层面上连接两个网络,并对分组报文 ...

  7. Hadoop作业性能指标及參数调优实例 (二)Hadoop作业性能调优7个建议

    作者:Shu, Alison Hadoop作业性能调优的两种场景: 一.用户观察到作业性能差,主动寻求帮助. (一)eBayEagle作业性能分析器 1. Hadoop作业性能异常指标 2. Hado ...

  8. [Java开发之路](16)学习log4j日志

    1. 新建一个Javaproject.导入Jar包(log4j-1.2.17.jar) Jar包下载地址:点击打开链接 2. 配置文件:创建并设置log4j.properties # 设置 log4j ...

  9. ThreadLocal使用演示样例

    MainActivity例如以下: package cc.cv; import android.os.Bundle; import android.app.Activity; /** * Demo描写 ...

  10. Android开发经验之获取画在画布上的字符串长度、宽度(所占像素宽度)

    Android中获取字符串长度.宽度(所占像素宽度) 计算出当前绘制出来的字符串有多宽,可以这么来! 方法1: Paint paint = new Paint(); Rect rect = new R ...