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. Git版本控制及gitlab私有仓库

    Git版本控制系统 版本控制系统简介 版本控制系统是一种记录一个或若干个文件内容变化,以便将来查阅特定版本内容情况的系统 记录文件的所有历史变化 随时恢复到任何一个历史状态 多人协作开发 常见版本管理 ...

  2. mybatis group by查询返回map类型

    故事的发生是这样的. . . . . . . 一天 我发现我们的页面显示了这样的汇总统计数据,看起来体验还不错哦-- 然后,我发现代码是这样滴:分开每个状态分别去查询数量. 额e,可是为嘛不使用简单便 ...

  3. Oracle数据库创建与连接

    一.Oracle数据库的安装 1.下载Oracle数据库 网址:Oracle 数据库软件下载 | Oracle 技术网 | Oracle 由于需要注册,所以我就没有采用这种下载方式,  右击该网页查看 ...

  4. Express post请求无法解析参数的原因

    router.post('/', function(req, res) { console.log(req.body); console.log(req.body.name); console.log ...

  5. C判断语句

    C 判断 判断结构要求程序员指定一个或多个要评估或测试的条件,以及条件为真时要执行的语句(必需的)和条件为假时要执行的语句(可选的). C 语言把任何非零和非空的值假定为 true,把零或 null ...

  6. Robot Framework：接口测试

    ---恢复内容开始--- robotframework进行接口测试,需要安装Request和RequestLibrary包 pip install requests pip install -U ro ...

  7. 【NOIP2019模拟2019.9.4】B（期望的线性性）

    题目描述: \(1<=n,ai<=5*10^5\) 题解: 我是弱智我不会期望线性. 设\(E(a[i])\)表示第i个期望被减的个数. \(E(a[1])=a[1]\) 不难发现\(E( ...

  8. 收集python2代码转python3遇到的问题

    在程序中做python版本判断 sys.version_info # sys.version_info(major=2, minor=7, micro=16, releaselevel='final' ...

  9. Python内置模块-time && datatime

    Python提供两种时间表示方式,一种是时间戳,从1970年1月1日 0时开始.一种是struct_time数组格式,共有9个元素. import time print(time.time()) #返 ...

  10. （转）数字证书, 数字签名, SSL(TLS) , SASL

    转:http://blog.csdn.net/xueshanfeihu0/article/details/9154219 因为项目中要用到TLS + SASL 来做安全认证层. 所以看了一些网上的资料 ...