<!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. java面试题最容易犯错

    1. static 和 final 的用法 static 的作用从三个方面来谈,分别是静态变量.静态方法.静态类. 静态变量:声明为 static 的静态变量实质上就是全局变量,当声明一个对象时,并不 ...

  2. C#中using语句是什么意思

    使用using语句最终生成的其实是一个try, finally代码块,在finally代码块里释放资源.要求是:为 using 语句提供的对象必须实现 IDisposable 接口.此接口提供了 Di ...

  3. Axure 部件的交互样式

    选中的 时  需要设置事件

  4. js 原生 document.querySelectorAll document.getElementsByTagName document.querySelector document.getElementById的区别

    1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组). ...

  5. 管理Session

    1:把session和本地线程绑定在一起. 1):创建一个sessionFactory.然后由它去创建session package com.hq.util; import org.hibernate ...

  6. POJ 1321 棋盘问题（dfs入门）

    Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子 ...

  7. Python每日一题 004

    将 0001 题生成的 200 个激活码(或者优惠券)保存到 Redis 非关系型数据库中. 代码 import redis import uuid # 创建实例 r=redis.Redis(&quo ...

  8. Git Git管理码云项目

    Git  一.下载安装 1. 要使用git 先安转git 请到官网下载最新git  https://git-scm.com/downloads 2. 一路默认安装,安装完成右键查看下是否有Git. 二 ...

  9. python 内置模块-re

    想要在python中使用正则表达式,就需要先导入re模块,正则表达式是一个强大的功能,可以为我们节省很多工作量. 一.元字符: 用一些具有特殊含义的符号表示特定种类的字符或位置.     . 匹配除换 ...

  10. 【Windows、SVN】在Windows服务器下安装SVN，并在客户端能维护代码版本

    1.分别在客户端和服务器端安装软件 在网上搜索一下安装包的下载地址(这里暂不介绍) 得到2个安装文件 Server是装在服务器端的,另外一个装在客户端 2.安装SVN服务器端 基本一致下一步即可 特殊 ...