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. iptables 防火墙（下）

    iptables 防火墙(下) 1. 常见的隐含匹配条件: 1.1 端口匹配: --sport 源端口.--dport 目的端口 1.2 TCP标记匹配: -tcp-flags 检查范围被设置的标记 ...

  2. Python排序功能进阶

    sorted和sort() li = [9, 1, 8, 2, 7, 3, 6, 4, 5] s_li = sorted(li) print ('Sorted Variable: \t', s_li) ...

  3. The 'with' and 'as' Keywords

    Programming is all about getting the computer to do the work. Is there a way to get Python to automa ...

  4. mac上安装mamp集成环境

    深知mac配置环境是个坑,本人之前用的是xampp因为近期需要mongodb扩展,死活装不明白,索性就换了一个集成环境,在网上找了好多,最后选择了mamp 因为正版的要收费,所以在下载了N个以后终于找 ...

  5. OpenGL Download

    { https://www.opengl.org/ }

  6. Java——类之间的关系

    3.7 类之间的关系 3.7.1 泛化关系 类和类之间的继承关系及接口与接口之间的继承关系. 3.7.2 实现关系 类对接口的实现. 3.7.3 关联关系 类与类之间的连接,一个类可以知道另一个类的属 ...

  7. python3 获取电脑磁盘、CPU、内存使用情况

    import psutil # cd C:\Python36-32\Scripts pip install psutil # 获取本机磁盘使用率和剩余空间G信息 def get_disk_info() ...

  8. Shiro学习（24）在线回话管理

    有时候需要显示当前在线人数.当前在线用户,有时候可能需要强制某个用户下线等:此时就需要获取相应的在线用户并进行一些操作. 本章基于<第十六章 综合实例>代码构建. 会话控制器 Java代码 ...

  9. snaker配置

    1,导入jar包 jar包 2,snaker的配置 3,snaker的工具类 以上是使用snaker的最基本的配置. http://lightfor.org/snaker/demo.html

  10. 搭建本地 8.8 W 乌云漏洞库

    这个是关于两个图片马的帖子. https://zhuanlan.zhihu.com/p/27486144 这个是开源地址: https://github.com/m0l1ce/wooyunallbug ...