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. C语言指向指针的指针

    #include <stdio.h> int main() { /********************************************* * 指向指针的指针:指针变量存 ...

  2. Stm32CubeMX5 创建LED控制工程 - 基于stmf051k8u6

    一. 创建一个控制LED的工程 1. 安装好 Stm32CubeMX5 后 打开软件 选择 “ File-->  New Project...” 创建一个新工程 2. 之后会出现一个选择芯片的窗 ...

  3. 针对利用tzselect修改时间及ln -sf 修改系统时间不好使的情况 linux 6.5

    首先,利用ntpdate -u {ip}同步目标服务器的时间 然后这里一般物理硬件的时间也不会对,所以才会导致修改时间不成功所以要同时把物理硬件时间进行修改ntpdate之后,时间已经变更使用hwcl ...

  4. PHP-在排序数组中查找元素的第一个和最后一个位置

    给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置. 你的算法时间复杂度必须是 O(log n) 级别. 如果数组中不存在目标值,返回 [ ...

  5. linux磁盘空间占用分析

    df -h # 查看目前磁盘空间占用 cd / # 切换到根目录 du -sh # 查询每个目录占用的大小 lsof | grep delete # 查看当前系统打开文件 # 删除不使用的文件, 如果 ...

  6. 创建一个apk：按钮-click-文字display，测试apk；安装在真机进行调试的方法

    问题引入: 怎么样在一个app做event事件?例如touch操作,滑动操作,和按键事件(back,home等) 回答1:device.touch(x,y) ---获取device对象,然后touch ...

  7. js设计模式——1.代理模式

    js设计模式——1.代理模式 以下是代码示例 /*js设计模式——代理模式*/ class ReadImg { constructor(fileName) { this.fileName = file ...

  8. C++之string面试问题

    1.指针变量指向字符串常量的问题 代码如下: "; 问p[0]=2;是否可以?原因? 答案:不可以.“123456”是字符串常量,存储在常量区,其值不可更改. 2.sizeof求字符串长度问 ...

  9. 搭建单机版spark

    二.下载软件 JDK,Scala,SBT,Maven 版本信息如下: JDK jdk-7u79-linux-x64.gz Scala scala-2.10.5.tgz 三.解压上述文件并进行环境变量配 ...

  10. java中的javap命令（工作中补充的知识）

    背景: 上周针对某信得压力测试demo进行场景复现,但是只提供了class文件,只能通过反编译的软件进行查看,在复现的过程中报错某某某行,这里我以xx行代替,因为是class文件,所以并不能确定具体到 ...