<!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. AtCoder Beginner Contest 131 F - Must Be Rectangular!

    题意:给出二维平面的n个点坐标,定义一种操作:若恰好三个点能形成一个矩形(当然这个矩形会缺了一个点),那么就在图上添加这个缺的点,问在原图上最多能进行几次这样的操作. 解法:这题想了挺久没想到,一看题 ...

  2. 前端学习(二十二）css3（笔记）

    html5        普通:        header section footer nav article aside figure 特殊:        canvas video audio ...

  3. eclipse远程调试Tomcat方法（转）

    转自:http://blog.csdn.net/afgasdg/article/details/9236877 1.Linux中配置tomcat在catalina.sh中添加如下CATALINA_OP ...

  4. Thread类和Runable接口使用

    不废话,就一个类,直接拷贝代码执行 package com.jtfr.demo; /** * 主要:继承 Thread 类和 Runnable接口 * @author 陈康明 qq:112318152 ...

  5. java 延时

    Java中主要有两种方法来实现延迟,即:Thread和Timer 1.普通延时用Thread.sleep(int)方法,这很简单.它将当前线程挂起指定的毫秒数.如try{Thread.currentT ...

  6. shell倒计时下班时间

    #!/bin/sh offWorkTime="19:00:00" offWorkHour=${offWorkTime::} offWorkMinute=${offWorkTime: ...

  7. pic16f877a的PWM实验学习

    遇到的问题,编译时找不到TRISC.一开始以为头文件中没有定义,发现定义了. 所以是自己创建工程的时候,设备类型选错了. #include <pic.h> __CONFIG(0xFF32) ...

  8. CDN技术之--全局负载均衡（GSLB）

    负载均衡就是智能调度全局负载均衡(GSLB)的负载均衡主要是在多个节点之间进行均衡,其结果可能直接终结负载均衡过程,也可能将用户访问交付下一层次的(区域或本地)负载均衡系统进行处理.GSLB最通用的是 ...

  9. 【转载】OsmocomBB在kali的安装方法

    转载自http://www.nigesb.com/gsm-hacker-abhout-sms-sniffer.html 首先的首先需要建立Arm代码的编译环境,没有编译环境,就无法对osmocombb ...

  10. 如何查看red gate安装时的log

    安装界面,点击左上角的log open log file C:\Users\clu\AppData\Local\Temp\{69EEB6B0-A9AD-4BD4-8231-92C992F1FF05}\ ...