demo

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>Vuejs</title>

  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

  <div id="app">

      <p>复选框：</p>

       <input type="checkbox" id="basketball"  value="篮球" v-model="checkedNames">

       <label for="basketball">篮球</label>

       <input type="checkbox" id="football"  value="足球" v-model="checkedNames">

       <label for="football">足球</label>

    <input type="checkbox" id="tennis" value="网球" v-model="checkedNames">

    <label for="tennis">网球</label>

       <span>您选择的值为：{{checkedNames}}</span>

  </div>

<script>

   new Vue({

     el:'#app',

     data: {

       checkedNames:[]

     }})

</script>

</body>

</html>

　　效果：

2018-03-20    15:58:33

Vue.js 复选框的更多相关文章

  1. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  2. Angular/Vue多复选框勾选问题

    此页面效果以Angular实现,Vue也可按照其大致流程实现,其核心本质没有改变. 功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交 ...

  3. js复选框全选反选

    本篇文章是关于复选框的,有2种形式:1.全选.反选由2个按钮实现:2.全选.反选由一个按钮实现. <!DOCTYPE html> <html> <head> < ...

  4. JS复选框选中

    Web前端之复选框选中属性   熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常 ...

  5. js复选框实现全选、全不选、反选

    复选框为checkbox对象 通过input就可以将一个简单的复选框呈现在页面上 <input type="checkbox" /> 要实现的大概就是这样一个页面 思路 ...

  6. js复选框全选

    <input name='chkAll' type='checkbox' id='chkAll' onclick='CheckAll(this.form)' value='checkbox'&g ...

  7. js复选框插件

    <div class="selectList selectQgClass" id="selectQgClass"> <div class=&q ...

  8. 使用vue实现复选框单选多选

    界面样式: <div class="right_con" v-if="isClickApply" style="border:none" ...

  9. js复选框操作

    $(".checkall").click(function () {                if (this.checked) {                    $ ...

随机推荐

  1. Redis事务 和 pipleline

    1.reidis事务 Redis 事务可以一次执行多个命令, 并且带有以下三个重要的保证: 批量操作在发送 EXEC 命令前被放入队列缓存. 收到 EXEC 命令后进入事务执行,事务中任意命令执行失败 ...

  2. teb-安装

    源码:https://github.com/rst-tu-dortmund/teb_local_planner.git 以husky为例子: 1.在gazebo里面配置好机器人底盘的环境 roslau ...

  3. linux - sftp, scp, rz, sz（文件传输命令）

    1. sftp Secure Ftp 是一个基于SSH安全协议的文件传输管理工具.由于它是基于SSH的,会在传输过程中对用户的密码.数据等敏感信息进行加密,因此可以有效的防止用户信息在传输的过程中被窃 ...

  4. Java 简单链表实现

    1.初衷 最近在看Java基础,有一章节涉及到链表,便记之所学所得. 2.链表的定义 链表是存储地址不连续的线性存储结构 3.链表的基本结构 一个节点包含当前节点,与下个节点的引用 4.简单链表的实现 ...

  5. docker安装cboard

    参考链接: https://hub.docker.com/r/chenlmdocker/docker-cboard/dockerfile https://www.cnblogs.com/zimo-ji ...

  6. Ubuntu图形界面和终端界面切换快捷键

    Ctrl+Alt+F1可以从图形界面切换到终端界面. Ctrl+Alt+F7可以从终端界面退出来,重新回到图形界面

  7. loadrunner——win7+LR11配置

    一. 安装vmware虚拟机 下载安装vmware15后,可使用密钥为:CG392-4PX5J-H816Z-HYZNG-PQRG2 二. 安装win7系统 2.1下载win7镜像文件 2.2 vmwa ...

  8. Delphi动态添加控件

    {动态添加导航} var Panl:Tpanel; MainPage,Subpage:TPageControl; TabSheet1: TTabSheet; ToolBar2: TToolBar; S ...

  9. flink详细介绍

    Flink是什么 Flink是一个分布式计算引擎 MapReduce Spark Storm 同时支持流计算和批处理 和Spark不同, Flink是使用流的思想做批, Spark是采用做批的思想做流 ...

  10. python 拆分字符串（3.0）

    拆分字符串 1. def my_split(s, ds): l = [s] for d in ds: res = [] list(map(lambda x: res.extend(x.split(d) ...