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. 2018-8-9-win-消息

    title author date CreateTime categories win 消息 lindexi 2018-8-9 15:35:4 +0800 2018-2-13 17:23:3 +080 ...

  2. MySQL源码编译与初始化

    MySQL源码编译与初始化 链接:https://pan.baidu.com/s/1ANGg3Kd_28BzQrA5ya17fQ 提取码:ekpy 复制这段内容后打开百度网盘手机App,操作更方便哦 ...

  3. 发布后台接口报错：could not load file or assembly 'mysql.data,' version=6.7.4.0, Culture=neutral, PublicKeyToken=c5687fc88969c44d

    本地调试正常,但是服务器上面一直报错:could not load file or assembly 'mysql.data,' version=6.7.4.0, Culture=neutral, P ...

  4. Java对象什么时候可以被垃圾回收？JVM的永久代中会发生垃圾回收么？

    当对象对当前使用这个对象的应用程序变得不可触及的时候,这个对象就可以被回收了.垃圾回收不会发生在永久代,如果永久代满了或者是超过了临界值,会触发完全垃圾回收(Full GC).如果你仔细查看垃圾收集器 ...

  5. 【JavaWeb项目】一个众筹网站的开发（九）邮件开发

    Java官方支持邮件开发,Javax-mail jdk中默认没有,需要另外下载 apache的基于Javax-mail开发了commons-mail,更加简单高效,推荐使用 一.电子邮件接收和发送协议 ...

  6. jQuery与Vue的区别、从jQuery到Vue框架优点总结

    一.两者的区别 1.数据与视图分离 2.数据驱动视图 二.从jQuery到Vue框架的总结 1.数据与视图分离,解耦 2.数据驱动视图,只关心数据,DOM操作已经被框架封装

  7. leetcood学习笔记-9

    题目描述 方法一:转换为字符串 class Solution: def isPalindrome(self, x: int) -> bool: if x<0: return False e ...

  8. （转）openfire插件开发（三）通过http方式向openfire客户端发信息

    转:http://blog.csdn.net/hzaccp3/article/details/19964655 需求:  通过http方式,向openfire客户端发信息(非XMPP协议)openfi ...

  9. matlab中的 ndims(a)、length(a)、size(a) 分别是什么意思？

    size(a)表示矩阵每个维度的长度比如size([1 2 3;4 5 6])等于[2 3]表示他有2行3列size([1 2 3])等于[1 3]表示他有1行3列另外size(a,n)表示矩阵a在第 ...

  10. Python中使用item()方法遍历字典的例子

    Python中使用item()方法遍历字典的例子 这篇文章主要介绍了Python中使用item()方法遍历字典的例子,for...in这种是Python中最常用的遍历字典的方法了,需要的朋友可以参考下 ...