<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>v-model</title>

     <script type="text/javascript"  src="../js/vue.js"></script>

   <script>

     window.onload= () =>{new Vue({

   el: '#group',

   data: {

     checked:false,

     users:[],

     selected:'',

     msg:''

   }

 })

 }

 </script>

 </head>

 <body>

 <div id="group" align="left">

   <h4>简单的问卷表格</h4>

   <!--单选框-->

     <div id="checkbox">

       是否想要学习该门课程：<input type="checkbox" v-model="checked">{{checked}}

    </div>

    <!--多选框-->

    请选择你需要的老师：<br/>

    <div id="multi checkbox">

     <input type="checkbox" value="lucy" v-model="users"/>lucy<br/>

     <input type="checkbox" value="cidy" v-model="users"/>cidy<br/>

     <input type="checkbox" value="bob" v-model="users"/>bob<br/>

     <br/>

     选中的老师：{{users}}

   </div>

   <!--下拉列表-->

   请选择你想学习的课程：<br/>

   <div id="select">

     <select v-model="selected">

       <option disabled="disabled" value="">--请选择--</option>

       <option>java</option>

       <option>c++</option>

       <option>c#</option>

       <option>php</option>

       <option>html</option>

 </select><br/>

 <span>已选择：{{selected}}</span>

 </div><br/>

 <!--文本框-->

 <p>请输入其它备注文本内容:</p>

 <div id="textarea">

   <textarea v-model="msg"></textarea>

 </div>

 </div>

 </body>

 </html>

 </html>

v-model指令实现简单的问卷表格的更多相关文章

  1. 利用Apache POI 实现简单的Excel表格导出

    1.利用POI API实现简单的Excel表格导出 首先假设一个学生实体类: package com.sun.poi.domain; import java.io.Serializable; impo ...

  2. 20155219--pwd指令的简单实现

    pwd指令的简单实现 pwd命令作用 Linux中用** pwd **命令来查看"当前工作目录"的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确 ...

  3. (一) Qt Model/View 的简单说明

    (一) Qt Model/View 的简单说明 .预定义模型 (二)使用预定义模型 QstringListModel例子 (三)使用预定义模型QDirModel的例子 (四)Qt实现自定义模型基于QA ...

  4. _DataStructure_C_Impl:求图G中从顶点u到顶点v的一条简单路径

    #pragma once #include<stdio.h> #include<stdlib.h> #define StackSize 100 typedef int Data ...

  5. Qt Model/View 的简单说明

    目录: (一) Qt Model/View 的简单说明 .预定义模型 (二)使用预定义模型 QstringListModel例子 (三)使用预定义模型QDirModel的例子 (四)Qt实现自定义模型 ...

  6. ASP.NET MVC Model绑定的简单应用

    Model绑定是 MVC 框架根据 HTTP 请求数据创建 .NET 对象的一个过程. 一.简单类型 1.单一值

  7. angular指令的简单练习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. java(itext) 一个很简单的PDF表格生成工具

    先上个效果图 因为做的项目涉及到数据预测,其中有大量打印业务来支撑实体店的运营,因为注重的是数据,要求简洁,清晰,所以写了个很简单也很实用的工具类. 如果需要编写样式或者插入背景,都可以查阅itex官 ...

  9. [django]django+datatable简单运用于表格中

    使用datatable首先需要下载datatable文件,文件主要包括三个文件夹css,img,js相关文件,在django中如何配置呢? 首先需要在模板中引入datatable文件,格式如下: &l ...

随机推荐

  1. windows 邮槽mailslot 在服务程序内建立后客户端无权限访问（GetLastError() == 5）的问题

    邮槽创建在服务程序内,可以创建成功, 但外部客户端连接时 m_hMailslot = CreateFile("\\\\.\\mailslot\\zdpMailslot",GENER ...

  2. response的contentType的类型值Response.ContentType

    MIME类型的含义 MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开.多用于指定一些客户端自定义的文件名,以及一些媒体 ...

  3. Amber TUTORIAL 4b: Using Antechamber to Create LEaP Input Files for Simulating Sustiva (efavirenz)-RT complex using the General Amber Force Field (GAFF)

    sustiva.pdb PDB: 1FKO Create parameter and coordinate files for Sustiva 1. 加氢: $ reduce sustiva.pdb ...

  4. Selenium基础知识(二)鼠标操作

    一.鼠标操作 这个需要使用webdriver下的ActionChains类,这个类是操作鼠标操作的: from selenium.webdriver import ActionChains 鼠标操作可 ...

  5. LineRenderer组建实现激光效果

    在射击游戏中狙击一般都有一个红外线的效果.比如

  6. opencv-resize()放缩函数简介

    主要介绍函数resize(); 图像缩放的效果图如下: 主程序代码及函数解释如下所示: /******************************************************* ...

  7. vue中使用导出表格功能

    1.下载依赖 npm install -S file-saver xlsx npm install -D script-loader 2.在src下创建vendor文件夹,并在文件夹中放两个文件 Bl ...

  8. POJ 2752 Seek the Name,Seek the Fame(KMP,前缀与后缀相等)

    Seek the Name,Seek the Fame 过了个年,缓了这么多天终于开始刷题了,好颓废~(-.-)~ 我发现在家真的很难去学习,因为你还要陪父母,干活,做家务等等 但是还是不能浪费时间啊 ...

  9. Git branch 分支与合并分支

    Git branch 分支 查看当前有哪些branch bixiaopeng@bixiaopengtekiMacBook-Pro xmrobotium$ git branch * master 新建一 ...

  10. WinPE引导硬盘安装64位的Windows_Server_2008系统

    用 U盘WinPE引导实现硬盘安装Windows Server 2008 R2系统的方法如果想不用光盘(光盘和光驱总是靠不住的),只用U盘或移动硬盘上的WinPE引导,在电脑硬盘安装一个64位的Win ...