1.  

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>v-model</title>
  6.      <script type="text/javascript"  src="../js/vue.js"></script>
  7.    <script>
  8.      window.onload= () =>{new Vue({
  9.    el: '#group',
  10.    data: {
  11.      checked:false,
  12.      users:[],
  13.      selected:'',
  14.      msg:''
  15.    }
  16.  })
  17.  
  18.  }
  19.  </script>
  20.  
  21.  </head>
  22.  <body>
  23.  
  24.  <div id="group" align="left">
  25.    <h4>简单的问卷表格</h4>
  26.  
  27.    <!--单选框-->
  28.      <div id="checkbox">
  29.        是否想要学习该门课程：<input type="checkbox" v-model="checked">{{checked}}
  30.     </div>
  31.     <!--多选框-->
  32.     请选择你需要的老师：<br/>
  33.  
  34.     <div id="multi checkbox">
  35.      <input type="checkbox" value="lucy" v-model="users"/>lucy<br/>
  36.      <input type="checkbox" value="cidy" v-model="users"/>cidy<br/>
  37.      <input type="checkbox" value="bob" v-model="users"/>bob<br/>
  38.      <br/>
  39.      选中的老师：{{users}}
  40.    </div>
  41.    <!--下拉列表-->
  42.    请选择你想学习的课程：<br/>
  43.    <div id="select">
  44.      <select v-model="selected">
  45.        <option disabled="disabled" value="">--请选择--</option>
  46.        <option>java</option>
  47.        <option>c++</option>
  48.        <option>c#</option>
  49.        <option>php</option>
  50.        <option>html</option>
  51.  
  52.  </select><br/>
  53.  <span>已选择：{{selected}}</span>
  54.  </div><br/>
  55.  <!--文本框-->
  56.  <p>请输入其它备注文本内容:</p>
  57.  <div id="textarea">
  58.    <textarea v-model="msg"></textarea>
  59.  
  60.  </div>
  61.  
  62.  </div>
  63.  
  64.  </body>
  65.  </html>
  66.  </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. 【LeetCode每天一题】Pascal's Triangle(杨辉三角)

    Given a non-negative integer numRows, generate the first numRows of Pascal's triangle. In Pascal's t ...

  2. MyBatis SpringMVC映射配置注意

    applicationContext.xml中要配置 <!-- MyBatis 的 sqlSessionFactory --> <bean id="sqlSessionFa ...

  3. maven设置每次构建获取最新版本号

    build.gradle中的依赖是通过设置maven依赖实现.我们知道,maven可以说是通过一个坐标定位来确定唯一一个包的,所说的坐标定位分别是groupId,artifactId和version三 ...

  4. winhex模版

    模版数据类型: char 字符 字符数组 char[i] binary  显示为二进制 hexadecimal uint32  显示4个字节,按16进制小端显示

  5. PyQT5速成教程-1 简介与环境搭建

    本文由 沈庆阳 所有,转载请与作者取得联系! PyQt简介 一个良好的界面是人机交互中十分重要的一环. Python作为脚本语言,起初并未拥有GUI开发的部分.但随着其开放的扩展性,使得Python不 ...

  6. node.js初识11

    1.EJS  Embedded JavaScript templates 模板引擎 .EJS的效率不高,因为他后台是通过字符串来处理的 <ul> <% for(var i = 0 ; ...

  7. LeetCode141.环形链表

    给定一个链表,判断链表中是否有环. 进阶:你能否不使用额外空间解决此题? /** * Definition for singly-linked list. * class ListNode { * i ...

  8. Apache Storm Installation

    安装的过程参照此处的过程介绍(https://www.tutorialspoint.com/apache_storm/apache_storm_installation.htm) 安装的过程要安装3个 ...

  9. 从caffemodel里面导出参数

    参见博文https://blog.csdn.net/u014510375/article/details/51704447

  10. Lua之table

    Lua table(表) 参考:http://www.runoob.com/lua/lua-tables.html table 是 Lua 的一种数据结构用来帮助我们创建不同的数据类型,如:数字.字典 ...