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. ArrayList的几种初始化方法

    1.使用Arrays.asList方法 ArrayList<Object> obj = new ArrayList<Object>(Arrays.asList(Object o ...

  2. postgresql 两表关联更新

    UPDATE 要更新的表 SET 字段1 = cqt.字段1, 字段2 = cqt.字段2, FROM 数据来源表 cqt WHERE 要更新的表.bsm = cqt.bsm

  3. javascript笔记 (持续更新)

    1. 语言主要分为两大类:编译型语言和解释型语言. 对于静态语言来说(如Java.C++.C),处理上述这些事情的叫编译器(Compiler),相应地对于JavaScript这样的动态语言则叫解释器( ...

  4. Oracle数据库创建与连接

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

  5. QList和QVector等容器的区别：(转)

    源地址:https://blog.csdn.net/qq_33266987/article/details/53333373 Qlist.QVector 与 list.vector似乎不太类似: li ...

  6. C之输入输出函数(2) -- gets()

    https://www.ibm.com/support/knowledgecenter/en/ssw_ibm_i_71/rtref/gets.htm#gets #include <stdio.h ...

  7. Magento多语言注意事项

    Magento一般使用CSV文件方式翻译国际化词条 一般用法是代码中: <?php echo Mage::helper("module_name")->__('Item ...

  8. 【转】Spring+Websocket实现消息的推送

    本文主要有三个步骤 1.用户登录后建立websocket连接,默认选择websocket连接,如果浏览器不支持,则使用sockjs进行模拟连接 2.建立连接后,服务端返回该用户的未读消息 3.服务端进 ...

  9. 【转】SpringMVC整合websocket实现消息推送及触发

    1.创建websocket握手协议的后台 (1)HandShake的实现类 /** *Project Name: price *File Name:    HandShake.java *Packag ...

  10. SQl 分组后按照某一列拼接字符串

    /* 分组之后拼接字符串 */ ;with t as( SELECT WorkflowId,Remark FROM dbo.OperatorAutomationProcess GROUP BY Wor ...