<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. HDU 2689 Tree

    Tree Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  2. Django项目之Web端电商网站的实战开发(三)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  3. Android eclipse 提示java代码 快捷键

    1.提示java代码能够用ALT+/ 键就能够了(前提是你要把你须要的类或方法的首字母打出来).我添加的部分:仅仅要输入sysout,然后alt+/键就能够输出System.out.prinln(), ...

  4. Android线程池(二)——ThreadPoolExecutor及其拒绝策略RejectedExecutionHandler使用演示样例

    MainActivity例如以下: package cc.vv; import java.util.concurrent.LinkedBlockingQueue; import java.util.c ...

  5. iOS_31_cocos2d_微信飞机

    终于效果图: 纹理素材 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize/400 ...

  6. 图片裁剪的js有哪些(整理)

    图片裁剪的js有哪些(整理) 一.总结 一句话总结:如果用了amaze框架就去amaze框架的插件库里面找图片裁剪插件,如果没用,jcrop和cropper都不错. 1.amazeui的插件库中有很多 ...

  7. 轻松学习Linux之Shell的常用过滤器

    下载高清视频: http://down.51cto.com/data/157818    大小3:MB      时长: 7分钟 更多内容见: Linux爱好者的圣诞大餐-轻松学习Linux系列多媒体 ...

  8. BZOJ2806: [Ctsc2012]Cheat(广义后缀自动机,单调队列优化Dp)

    Description Input 第一行两个整数N,M表示待检查的作文数量,和小强的标准作文库的行数接下来M行的01串,表示标准作文库接下来N行的01串,表示N篇作文 Output N行,每行一个整 ...

  9. vim学习3

    可视模式:

  10. C# Bartender模板打印 条码,二维码, 文字, 及操作RFID标签等。

    1.在之前写的一篇文章中, 有讲到如何利用ZPL命令去操作打印里,  后面发现通过模板的方式会更加方便快捷, 既不用去掌握ZPL的实现细节, 就可以轻松的调用实现打印的功能. 解决方案: 1.网络下载 ...