vue中使用checkbox

在vue中，通过v-model来判断当前checkbox是否被选中，它绑定一个数组，选中项的值会自动添加到数组中。
如果我们要求选项至少选择一个值，我们来通过disabled来禁止用户取消点击选项

<template><div>请选择你的爱好</div><input type="checkbox" v-for='v in arr' v-model="aihao" :value="v"  :disabled="aihao.length==1&&aihao[0]==v">{{v}}<div>你已选中：{{aihao}}</div>
</template>
<script>export default {name: 'membersign',data(){return{//设置默认值游泳aihao:['游泳'],arr:['游泳','健身','旅游']}}}
</script>

vue中使用checkbox相关推荐

vue 给checkbox 赋值_浅谈vue中关于checkbox数据绑定v-model指令的个人理解
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: {{msg}} js里data初始化数据 new Vue({ el: "#myA ...
「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩源码在文末. 前言上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫.光学不敲等于没学哈(资深大佬除外哈) 目标就是实现如下的样子: 能够进行增删改查,并 ...
vue中简单的小插曲
我们现在来学习一下vue中一些简单的小东西: 首先我们必须要引入vue.js文件哦! 1.有关文本框里的checkbox js代码: new Vue({el:"#app",data ...
01-vue(v-text,插值语法,v-html,v-model,v-on,v-bind,vue中的this,事件按键修饰符)
01- vue是什么: <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
vue中v-for为何要加key？index为何不推荐作为key
在使用vue组件的时候,我们经常会遇到v-for必须要加key值来举个例子进行说明吧! 不存在key的情况 <!--* @Author: angula* @Date: 2020-08-07 0 ...
vue中v-model详解
vue中经常使用到和这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别.vue使用v-model实现这些标签数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素. ...
VUE中的模板语法以及过滤器和双向数据绑定
目录: 1. 模板语法 1.1 插值 1.1.1 文本 1.1.2 html 1.1.3 属性 1.1.4 表达式 1.2 指令 1.2.1 核心指令 1.2.1.1 v-if |v-else-if| ...
Vue基础--Vue中的双向绑定v-model指令
一.v-model的作用和使用场景 1.1 v-model指令介绍期望的绑定值类型:根据表单输入元素或组件输出的值而变化可以下下面元素使用: <input> <select> ...
vue中ztree使用懒加载的方法
vue中ztree使用懒加载的方法正常引用过后使用: import tree from "vue-giant-tree"; <tree:setting="sett ...

vue中使用checkbox

vue中使用checkbox相关推荐

最新文章

热门文章