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. 四、hibernate的缓存

    缓存: 就是将数据保存到内存中,需要使用时直接从内存中获取,不需要每次查询数据库或者磁盘中的文件 hibernate的缓存 一级缓存:Session级别的缓存 二级缓存:SessionFactory级 ...

  2. Html5介绍及新增标签

    什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍 ...

  3. 聊聊动态链接和dl_runtime_resolve

    写在前面 linux下的动态链接相关结构,重新回顾_dl_runtime_resolve的流程以及利用方法 动态链接相关结构 为了高效率的利用内存,多个进程可以共享代码段.程序模块化方便更新维护等,动 ...

  4. 2018-12-2-C#-Span-入门

    title author date CreateTime categories C# Span 入门 lindexi 2018-12-02 11:32:46 +0800 2018-06-18 11:1 ...

  5. No symbol table is loaded. Use the "file" command.

    No symbol table is loaded.  Use the "file" command. gdb 1. 首先使用gcc   -g    .c文件   -o  可执行文 ...

  6. windows下注册ocx控件

    OCX 是对象类别扩充组件(Object Linking and Embedding (OLE) Control Extension):是可执行的文件的一种,但不可直接被执行: 是 ocx 控件的扩展 ...

  7. java如何生成一个0-100的随机整数？

    public class Test {public static void main(String[] args) {int num=(int)(Math.random()*101);System.o ...

  8. Docker拉取镜像时错误解决办法

    拉取docker中的镜像时报错: [root@master ~]# docker pull docker.io/centos:latest Trying to pull repository dock ...

  9. express 路由能力

    demo var express=require("express"); var app=express(); app.get("/",function(req ...

  10. k8s-1.16 二进制安装

    环境机器配置: 172.16.153.70 master 172.16.77.121 node1 172.16.77.122 node2 系统初始化 [root@iZbp1c31t0jo4w553hd ...