Vue.js——v-model结合checkbox类型——2020.11.22

最新推荐文章于 2024-04-09 14:48:57 发布
最新推荐文章于 2024-04-09 14:48:57 发布
阅读量493 收藏 3
点赞数 2
分类专栏： Vue.js-实战开发 文章标签： vue checkbox 算法 多线程 ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43402353/article/details/109952513
版权

一丶v-model:checkbox

  • 复选框分为两种情况：单个勾选框和多个勾选框
  • 单个勾选框：
    • v-model即为布尔值
    • 此时input的value并不影响v-model的值
  • 多个复选框：
    • 当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组
    • 当选中某一个时，就会将input的value添加到数组中

二丶代码实战

<!--作者：key-->
<!--浏览工具：Chrome-->
<!--开发工具：WebStorm-->
<!--开发时间：2020/11/22 13:38-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
<!--    有label，可以点击文字，也可以直接勾选按钮-->
<!--    1.演示单选框-->
    <label for="license">
      <input type="checkbox" id="license" v-model="isAgree">同意协议
    </label>
    <h2>您选择的是：{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>
    <hr>
<!--  label没有id，那么点击文字，就不能达到勾选的目的，就只能去点击框勾选-->
    <label for="">
      <input type="checkbox" value="篮球" v-model="hobbies">篮球
      <input type="checkbox" value="足球" v-model="hobbies">足球
      <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
      <input type="checkbox" value="排球" v-model="hobbies">排球
    </label>
    <h2>您选择的爱好是：{{hobbies}}</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        isAgree:false,//单选框
        hobbies:[] //多选框
      }
    })
  </script>
</body>
</html>

三丶运行结果

在这里插入图片描述
在这里插入图片描述

——时人不识凌云木，直待凌云始道高——
Blockchain_KT
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
掌握vue指令之(11)v-model指令
weixin_43348064的博客
05-20 1137
123
v-model的基本使用；v-model原理；v-model绑定（textarea、checkbox、radio、select）；v-model的值绑定；v-model修饰符
qq_54075517的博客
08-10 4937
v-model的基本使用；v-model原理；v-model绑定（textarea、checkbox、radio、select）；v-model的值绑定；v-model修饰符
VUE中v-model对复选框的输入绑定
热门推荐
Cherries_h的博客
04-25 1万+
v-model 指令在表单 &lt;input&gt; 及 &lt;textarea&gt; 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)。对于复选框有如下方式1、单个复选框，绑定到布尔值        &lt;input type="checkbox" id="ch...
checkbox控件的checked属性作用是_vue-表单控件-v-model
weixin_39903176的博客
11-25 901
这一篇内容全部都用来讲关于v-model。后期进行对其部分进行更新。v-model定义· 作用：在表单元素上创建双向数据绑定· 说明：监听用户的输入事件以更新数据ps:这里需要注意的是，如果在data里面有声明值的话，那么会覆盖原本设置的初始值。比如：value、checked、selected等· 案例：计算器Html代码<div id="app"> <input typ...
Vue——04-02v-model的使用原理、结合radio、checkbox、checkbox（多选）、checked（值的绑定）、select以及修饰符的使用
NanChen的博客
10-21 4413
一、v-model使用原理 v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。 先看一下简单的v-model使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-model的基本使用</title> <script src="htt
vue.js 解决v-model让select默认选中不生效的问题
10-15
在Vue.js开发中，有时可能会遇到使用v-model绑定的select选择框无法正确显示默认选中的问题。本文将详细解析这个问题及其解决方案。 首先，v-model是Vue.js中用于双向数据绑定的关键指令，它可以让表单元素如select...
vue.js指令v-model实现方法
10-20
Vue.js的`v-model`指令是其核心特性之一，它为开发者提供了数据双向绑定的能力，使得视图与模型之间的交互变得更加简单和直观。在HTML表单元素如`<input>`、`<select>`或`<textarea>`上使用`v-model`，能够实时反映...
谈谈Vue.js——vue-resource全攻略
10-20
本篇文章主要介绍了谈谈Vue.js——vue-resource全攻略，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue.js使用v-model指令实现的数据双向绑定功能示例
10-18
Vue.js 是一个流行的前端JavaScript框架，它以其轻量级、高效和易用性著称。在Vue中，`v-model`指令是实现数据双向绑定的关键特性之一，这使得UI（用户界面）与应用程序的状态能够实时同步，极大地简化了表单处理和...
【vue】v-model与单选radio、checkbox、多选checkbox、select结合使用、以及三种修饰符展示
qq_44897899的博客
10-29 1777
代码 <div id="app"> <label for="male"> <!--name属性相同的input标签即为一组,单选框实现互斥效果（或者v-model绑定同一个变量{{}}）， 只有设置了name属性的表单元素才能在提交表单时传递它们的值。--> <input type="radio" name="sex" id="male" value="男" v-model="sex">男.
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
10-17
主要介绍了浅谈vue中关于checkbox数据绑定v-model指令的个人理解,v-model用于表单的数据绑定很常见，下面就来详细的介绍一下
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
04-09 1万+
在计算机科学中，语法糖（syntactic sugar）是指编程语言中可以更容易地表达一个操作的语法。它可以使程序员更加容易地使用这门语言，使操作变得更加清晰、方便，或者更加符合程序员的编程习惯。具体来说，语法糖是语言中的一个构件，当去掉该构件后并不影响语言的功能和表达能力。例如，C语言中的标记a[i]就是*(a+i)的语法糖。语言的处理器，包括编译器，静态分析器等，经常会在处理之前把语法糖构件转换成更加基础的构件，这个过程通常被称为"desugaring"。简而言之，语法糖就是一种便捷写法。
Vue.js：使用v-model创建一组复选框
零小唬的博客
01-11 592
Vue.js：使用v-model创建一组复选框
js框选功能（vue）
【IOS】swiper左右滑动时禁止页面上下滚动
07-19 1673
实现效果 实现逻辑 绘制区域 判断有多少控件在此区域，进行拖拽操作 布局 父容器page-design 设置position：relative，id为rectangular的框选盒子设置 position:absolute; display:none。 js实现框选效果 给父容器page-design绑定mousedown事件 在鼠标按下事件mousedown 记录起始坐标，及起始上边距与下边距，并监听鼠标移动的事件及松开的事件。 在鼠标移动mousemove事件中记录当前位置的坐标及相对父容
vue中checked结合v-model
nightwishh的博客
05-07 3960
复习了下vue的todolist记录下checked结合v-model加深印象 <p>未完成</p> <ul id="ul1"> <li v-if="!item.pd" v-for="item in list"> <input type="checkbox" v-model="item.pd">{{item.text}} <...
vue.js checkbox
czh4869623的专栏
10-06 329
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <s...
vue v-model 双向绑定表单元素的数据：实质是绑定了value、checked、selected属性
weixin_41796631的博客
10-06 1万+
用法： 可以用 v-model 指令在表单 &lt;input&gt;、&lt;textarea&gt; 及 &lt;select&gt; 元素上创建双向数据绑定。 它会根据控件类型自动选取正确的方法来更新元素。 尽管有些神奇，但 v-model 本质上不过是语法糖。 它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model 忽略所有表单元素的 val...
Vue表单和v-model
xiaobangsky的专栏
12-22 297
Vue表单和v-modelVue表单介绍一些form表单中的基础组件用法inputtextareacheckboxradioselectform修饰符.lazy.number.trimv-model代码示例自定义input总结ant-design-vue的使用 Vue表单 主要是按照Vue的文档，进行CRM操作，文档链接文档链接 介绍一些form表单中的基础组件用法 form表单中有哪些基本组件，如：input/textarea/checkbox/radio/select/form input //ht
v-model实例
Garbrielle的博客
02-20 251
v-model vue2: v-model实现主要是通过给原生元素绑定对应的属性和事件，并派发事件到父元素。父元素直接通过自定义组件v-model正常使用。 Input的v-model实现 <template> <input type="text" :value="val" @input="Update" /> </template> <script> export default { props: { val: Stri
请简述Vue.js v-model修饰符的作用
05-05
Vue.js的v-model指令是用于实现双向数据绑定的，但有时候我们需要在输入框中对数据进行一些格式化或者过滤操作，这时候就需要使用v-model修饰符来改变v-model的默认行为。 v-model修饰符可以有以下几种： 1. .lazy...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Blockchain_KT

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值