vue学习笔记三:常见的表单绑定

<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>
时间: 2024-11-05 16:05:31

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

Bootstrap快速学习笔记(2)表单系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之二 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 表单控件大小 表单控件状态 按钮 图像 详细介绍 表单控件大小表单控件大小可以通过给表单控件添加class类来实现,如果想要比较大,则添加input-lg类,如果想要比较小, 则添加input-sm类,但这仅是对高度进行了处理,如果要对宽度进行处理,需要在每个input控件外围添加div容器并带有col-xs-4类,并 且要在这组控件的外围

HTML5学习笔记(二)——表单1

表单一直是网页必不可少的一部分,一直以来,表单的作用被无限扩展,发展出了诸多新奇的用法,老版的HTML只支持很少的一部分常用表单,许多的新表单都需要借助CSS与JavaScript语言来进行构建,现在HTML5来了,她带来了新的表单,这些强大的表单项,可以省去一大块复杂的JavaScript代码,很值得去学习. 而且在新的表单里面,不再像以前每个表单都必须位于<form></form>之内,只要在<form></form>内定义一个id,然后在网页任何位置都

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

疯狂的暑假学习之  Django学习笔记(五)-- 表单 参考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path                                 除域名以外的请求路径,斜杠开头                      "/hello/" request.get_host()                      主机名                              

Bootstrap快速学习笔记(2)表单系列之一

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之一 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: .form-control类 水平表单 内联表单 详细介绍 form-control类把该类直接添加到控件上: 1.宽度变成了100%:2.设置了一个浅灰色(#ccc)的边框:3.具有4px的圆角:4.设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化:5.设置了placeholder的颜色为#999 水平表单最外层form标签要

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头     td 元素定义表格单元 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充   单元格合并 rowspan  属性规定单元格可横跨的行数.     <td rowspan="2"

bootstrap学习笔记一 登录水平表单

先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="UserName">用户名</label> <div class="controls"> <input type="tex

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

本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model="textBox" placeholder="输入内容...">输入的内容:{{ textBox }}</p> </div> <script type="text/javascript"> var vm1 = n

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

一.概述 在web页面开发中,经常需要获取和设置表单元素的值(如文本框中的内容),特别是在ajax应用中,更是常态.本文系统的介绍下如何操作. 同操作其它html元素一样,操作的过程差不多. 第一步,需要获取到表单元素对应的jquery(或dom)对象.这个主要是利用jquery的选择器机制. 第二步,调用表单元素的属性和方法来获取和设置值. 其中最常见的就是利用jquery对象的val方法.因为很多表单元素都有标准的 value属性,这个可以通过jquery的 val方法来读取和设置属性值.

HTML之学习笔记(十)表单元素

html表单元素的基本格式为(必须包含在form标签中) 大致可以分为文本类.按钮类.复选框和单选框.文件选择几类 1.文本类 文本框标签<input type = “text“ />,属性size文本框的宽度.maxlength可输入的最大字节长度.readonly=“readonly”文本只读,无法修改 密码框标签<input type = “password” />,在页面显示为黑色小圆点 隐藏标签(隐藏域)<input type=“hidden” />,不会对页

HTML&amp;CSS基础学习笔记1.26-input重置表单

重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[type]属性值为"reset"时,表示表单重置,它在页面的表现形式也是个按钮,但点击他的时候会让表单重置到页面刚加载时的状态. 看一段代码吧: <!DOCTYPE html> <html lang="en"> <head> <me