选项框选的内容在下面显示

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>vue表单的学习</title>

     <script src="./js/vue.js"></script>

     <script>

         //单一入口

     window.onload = function(){

         var app = new Vue({

             el:"#a",

             data:{

                 message:'你好'

             }

         });

         // 多选框的增删改查

         var app = new Vue({

             el:"#b",

             data:{

                 checknames:[]

             }

         });

         // 单选框

         var app = new Vue({

             el:"#c",

             data:{

                 picked:"",gender:"男"

             }

         });

     }

     </script>

 </head>

 <body>

     <div id = "a">

         <!-- 双向绑定用 v-model绑定 -->

     <input type='text' v-model='message'/>

     设置的变量内容是: {{message}}

     <!-- 多行文本域 textarea -->

     <textarea v-model="message" style="height:300px"></textarea><br/>

     <!-- 多选框的绑定 checkbox label是标签属性，来注明多选框的内容 -->

     <input type='checkbox' name="crouse" value='mysql'/>

     <label>mysql</label>

     <input type="checkbox" name="crouse" value="jquery"/>

     <label>jquery</label>

     <input type="checkbox" name="crouse" value="vue"/>

     <label>vue</label>

     <br/><br/>

 </div>

 <!-- 多选框的绑定并显示出来 -->

 <div id="b">

      <!-- 多选框的绑定 checkbox label是标签属性，来注明多选框的内容 -->

      <input type='checkbox' name="crouse" value='mysql' v-model="checknames" />

      <label>mysql</label>

      <input type="checkbox" name="crouse" value="jquery" v-model="checknames"/>

      <label>jquery</label>

      <input type="checkbox" name="crouse" value="vue" v-model="checknames"/>

      <label>vue</label>

      <!-- 用vue的模板语法来打印勾选的课程列表 -->

      {{ checknames }} <label>这是你所选的课程</label>

 </div>

 <br/><br/>

 <!-- vue的单选标签 -->

     <div id="c">

         <!-- name 分组 -->

         <input type="radio" name="yesorno" value="是" v-model="picked" />

         <label>是</label>

         <input type="radio" name="yesorno" value="否" v-model="picked" />

         <label>否</label>

         <input type="radio" name="nanornv" value="男" v-model="gender" />

         <label>男</label>

         <input type="radio" name="nanornv" value="女" v-model="gender" />

         <label>女</label>

         <br/>

         <span>你选中的是：{{ picked }}  ，&nbsp;选择性别：{{ gender }}</span>

     </div>

 </body>

 </html>

vue表单选项框的更多相关文章

  1. Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  2. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  3. Vue表单

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson11 一 vue表单 实在是太简单了,直接来个例子 <!DOC ...

  4. vue 表单输入与绑定 v-model

    vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...

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

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

  6. vue 表单校验（二）

    vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...

  7. vue表单验证--veevalidate使用教程

    vue表单验证----vee-validate使用教程 官网:https://baianat.github.io/vee-validate/ 一.安装 npm install vee-validate ...

  8. vue表单校验（三）

    vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 ...

  9. 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

    写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...

随机推荐

  1. delphi 讲的比较详细的多线程（推荐）

    在了解多线程之前我们先了解一下进程和线程的关系 一个程序至少有一个主进程,一个进程至少有一个线程. 为了保证线程的安全性请大家看看下面介绍 Delphi多线程同步的一些处理方案大家可以参考:http: ...

  2. android studio （安卓开发）如何使用外部模拟器（mumu模拟器）调试运行程序

    开发安卓 我觉得大家明白自带的模拟器卡的要死而且启动慢(我觉得八核的计算机应该可以解决这个问题),这里使androidstudio 使用外部模拟器 MuMu模拟器  配置方法 eclipse 开发安卓 ...

  3. 配置thinkphp对mysql线上线下切换不同环境的配置 - (mysql-thinkphp) (1)

    1.先打印出配置项的信息,在Index控制器下面的index->index里面设置 namespace app\index\controller; class Index { public fu ...

  4. ssh服务启动失败 /var/empty must be owned by root and not group or world-writable.

    输入 /etc/rc.d/init.d/sshd start 启动sshd服务,报如下错误: /var/empty must be owned by root and not group or wor ...

  5. VMware Workstation上新建虚拟机

    准备开始,话不多少,直接上图 点击创建新的虚拟机或者在文件上面选择新建虚拟机 点击完成就可以了 后面的步骤,是在公司电脑上完成的,新建了一个CentOs1,步骤同上,后面继续,然后需要更改配置,点击虚 ...

  6. tomcat端口号被占用，且杀进程不能够杀掉解决办法

    在电脑上安装了zookeeper以后,配置好tomcat启动发现端口号8009端口号被占用,报错如下: 采用netstat –ano 查询所有进程查看或者根据端口号查进程netstat -ano |f ...

  7. 151-PHP nl2br函数（二）

    <?php $str="h\nt\nm\nl"; //定义一个多处换行的字串 echo "未处理前的输出形式:<br />{$str}"; $ ...

  8. 【SQL必知必会笔记(1)】数据库基础、SQL、MySQL8.0.16下数据库、表的创建及数据插入

    文章目录 1.数据库基础 1.1 数据库(database) 1.2 表(table) 1.3 列和数据类型 1.4 行 1.5 主键 2.什么是SQL 3.创建后续练习所需数据库.表(MySQL8. ...

  9. bool之regexp正则注入(原理详解)

    感谢原创博主的文章,在此致敬.本文转自:http://www.cnblogs.com/lcamry/articles/5717442.html 我们都已经知道,在MYSQL 5+中 informati ...

  10. kafka源码系列之mysql数据增量同步到kafka

    一,架构介绍 生产中由于历史原因web后端,mysql集群,kafka集群(或者其它消息队列)会存在一下三种结构. 1,数据先入mysql集群,再入kafka 数据入mysql集群是不可更改的,如何再 ...