<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>v-on</title>

     </head>

     <body>

         <div id="app">

             <input type="checkbox" value="小红" v-model="arr"/>

             <label for="小红">小红</label>

             <input type="checkbox" value="小黄" v-model="arr"/>

             <label for="小黄">小黄</label>

             <input type="checkbox" value="小绿" v-model="arr"/>

             <label for="小绿">小绿</label>

             <p>{{arr}}</p>

         </div>

         <!-- 开发环境版本，包含了用帮助的命令行警告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

         <script type="text/javascript">

             var app = new Vue({

                 el: '#app',

                 data: {

                     arr: []

                 }

             })

         </script>

     </body>

 </html>

vue 表单输入绑定 checkbox的更多相关文章

  1. Vue表单输入绑定（文本框和复选框）

    文本框 <!DOCTYPE html><html>    <head>        <meta charset="utf-8">  ...

  2. Vue表单输入绑定

    <h3>基础用法</h3> <p>你可以用<strong>v-model</strong>指令在表单input,textarea以及sele ...

  3. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

  4. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  5. vue 表单输入与绑定 v-model

    vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...

  6. VUE：事件处理和表单输入绑定

    事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  7. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  8. Blazor和Vue对比学习（基础1.9）：表单输入绑定和验证，VeeValidate和EditFrom

    这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...

  9. Vue.js教程--基础2(事件处理 表单输入绑定

    事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...

随机推荐

  1. vue 如何读取编译携带的参数

    vue 环境有很多套,我们需要根据不同环境设置不同的一些参数,如何不装任何依赖的情况下获取参数 下面是我制作官网,需要根据开发还是生产环境配置不同CDN,用vue-cli2+webpack,配置是再: ...

  2. css3 渐变色兼容移动端

    .group_1 background #1a78f3 // 兼容不显示渐变色的浏览器 background: linear-gradient(180deg, #1a78f3 , #fff); bac ...

  3. python print 连续输出变量加字符串

    a=1 b=2 print(a,'+',b,'=',a+b) 输出:1+2=3

  4. Java Thread之start和run方法的区别

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11421515.html start 用start方法来启动线程,真正实现了多线程运行,这时无需等待ru ...

  5. mitmproxy 代理介绍及入门

    转载请注明出处 https://www.cnblogs.com/majianming/p/11823669.html mitmproxy 是一个python 写成的代理工具,可以代理https.htt ...

  6. 在树莓派3B上搭建LAMP

    一.安装apache2 sudo apt-get install apache2 在电脑上输入树莓派的网址会有如下显示 二.安装Mysql sudo apt-get install mysql-ser ...

  7. <自动化测试>之<使用unittest Python测试框架进行参数化测试>

    最近在看视频时,虫师简单提到了简化自动化测试脚本用例中的代码量,而python中本身的参数化方法用来测试很糟糕,他在实际操作中使用了parameterized参数化... 有兴趣就查了下使用的方法,来 ...

  8. CDN技术之--内容缓存工作原理

    有CDN前的网站服务技术–硬件扩展:高成本,灵活性和可扩展性比较差–镜像技术(mirroring):镜像服务器安装有一个可以进行自动远程备份的软件,每隔一定时间,各个镜像服务器就会到网站的源服务器上去 ...

  9. [CSP-S模拟测试]:玄学题/c（数学）

    题目传送门(内部题40) 输入格式 第一行:两个正整数$n$.$m$. 输出格式 第一行:一个整数,代表式子的值. 样例 样例输入1: 4 5 样例输出1: 0样例输入2: 799 8278 样例输出 ...

  10. Xcode5 统计单元测试覆盖率（仅限XCTest）

    概要 通过本篇文章,你将学会如何在Xcode5下使用统计XCTest测试代码的覆盖率,以及如何快速得到测试覆盖率的图形化报表. 为什么要特别说明Xcode5下的代码覆盖率统计,原因是,以前的方法在新环 ...