关于vue表单中，单选、多选、复选、下拉选的使用

最新推荐文章于 2024-05-21 21:57:08 发布
最新推荐文章于 2024-05-21 21:57:08 发布
阅读量3.9k 收藏 11
点赞数 1
分类专栏： vue学习笔记 文章标签： vue checkbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011608672/article/details/114671765
版权

vue表单选项的使用

单选

使用v-model指令给每个选项绑定同一个变量就可以确保只有一个被选中，同时value属性表示选中时的值。

	  <div id="app">
        <h1>单选：</h1>
        <label>男<input type="radio" v-model="gender" value="man"/></label>
        <label>女<input type="radio" v-model="gender" value="woman"/></label>
        <p>已选：{{gender}}</p>     
      </div>
      <script>
        var vm = new Vue({
            el:'#app',
            data:{
                gender:'man'//男女单选     
            }
        })
      </script>

复选框

1、单个复选

使用v-model指令绑定单选值，默认单选值为false,通过改变选框来改变值的状态

  <div id="app">
    	<h1>单个复选：</h1>
        <label>a<input type="checkbox" v-model="single"/></label>
        <p>已选：{{single}}</p>
  </div>
  <script>
     var vm = new Vue({
        el:'#app',
         data:{
            single:false//单个复选框
         }
      })
  </script>

2、多个值复选

使用v-model指令绑定一个变量，这些变量放在一个对象中，默认值都为false,通过改变选框来改变对象数据中值的状态

<div id="app">
    	<h1>多个值复选：</h1>
        <label>a<input type="checkbox" v-model="more.a"/></label>
        <label>b<input type="checkbox" v-model="more.b"/></label>
        <label>c<input type="checkbox" v-model="more.c"/></label>
        <p>已选：{{more}}</p>
  </div>
  <script>
     var vm = new Vue({
        el:'#app',
         data:{
            more:{a:false,b:false,c:false}//多个值复选
         }
      })
  </script>

3、多个复选

使用v-model指令v-model绑定一个相同的属性名称，这些变量放在一个数组中，值属性放在一个数组中

<div id="app">
    	<h1>多个复选：</h1>
        <label>a<input type="checkbox" v-model="multi" value="a"/></label>
        <label>b<input type="checkbox" v-model="multi" value="b"/></label>
        <label>c<input type="checkbox" v-model="multi" value="c"/></label>
        <p>已选：{{multi.join(',')}}</p>
  </div>
  <script>
     var vm = new Vue({
        el:'#app',
         data:{
            multi:[]//多个复选
         }
      })
  </script>

下拉选

使用v-for指令，避免重复书写option标签，默认一个选项值为空，同时用v-bind指令绑定value属性。当选中某一项时，该选项的value值赋给selected变量

<div id="app">
    	<h1>下拉选：</h1>
        <select v-model="selected">
            <option value="">请选择一个选项</option>
            <option v-for="item in items" :value="item.value">{{item.text}}</option>
        </select>
        <span>已选:{{selected}}</span>
  </div>
  <script>
     var vm = new Vue({
        el:'#app',
         data:{
            items:[{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'}],//下拉选数据
            selected:''//下拉选值
         }
      })
  </script>

综合全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <title>Document</title>
</head>
<body>
    <div id="app">

        <h1>单选：</h1>
        <label>男<input type="radio" v-model="gender" value="man"/></label>
        <label>女<input type="radio" v-model="gender" value="woman"/></label>
        <p>已选：{{gender}}</p>

        <hr>
        <h1>单个复选：</h1>
        <label>a<input type="checkbox" v-model="single"/></label>
        <p>已选：{{single}}</p>

        <h1>多个值复选：</h1>
        <label>a<input type="checkbox" v-model="more.a"/></label>
        <label>b<input type="checkbox" v-model="more.b"/></label>
        <label>c<input type="checkbox" v-model="more.c"/></label>
        <p>已选：{{more}}</p>

        <h1>多个复选：</h1>
        <label>a<input type="checkbox" v-model="multi" value="a"/></label>
        <label>b<input type="checkbox" v-model="multi" value="b"/></label>
        <label>c<input type="checkbox" v-model="multi" value="c"/></label>
        <p>已选：{{multi.join(',')}}</p>

        <hr>
        <h1>下拉选：</h1>
        <select v-model="selected">
            <option value="">请选择一个选项</option>
            <option v-for="item in items" :value="item.value" multiple>{{item.text}}</option>
        </select>
        <span>已选:{{selected}}</span>

          
      </div>

      <script>

        var vm = new Vue({
            el:'#app',
            data:{
                gender:'man',//男女单选
                single:false,//单个复选框
                more:{a:false,b:false,c:false},//多个值复选
                multi:[],//多个复选
                items:[{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'}],//下拉选数据
                selected:''//下拉选值

            }
        })

      </script>
</body>
</html>

全部效果展示：
在这里插入图片描述

面对疾风ba
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue表单绑定实现多选框和下拉列表的实例
12-29
在vue的实际开发过程中，我们如何将以选中的值直接渲染到页面中，这次主要说的是多选框和下拉列表的实现： 测试多选渲染： <input type=checkbox name=hobby :value=item.id :checked=loopsss.indexOf(item...
Vue 实现全选、多选、单选效果
chenyajundd的博客
08-05 3686
假如这里有多个卡片，点击相应卡片之后需要提交卡片内信息，我们需要把点击的卡片筛选出来，在不使用组件库的前提下实现全选，多选，单选操作（其中全选和多选为一个需求，单选为一个需求）
vue之单选框
热门推荐
Haines
05-26 1万+
使用了vue以后，发现这真的是一个灵活高效的框架，能够轻松实现页面的实时刷新。 那么，今天先聊聊单选框的使用。一般我们使用单选框，会这么写： //HTML <input type="radio" name="radios" value="1" checked><label>one</label> <br> <input type="radio" name="radios" value="2"><label>two</lab
【Vue】el-checkbox多选框实现单选效果，选中一个选项则自动取消其他勾选
最新发布
coderYYY的博客
05-21 909
多选框的样式，单选框的效果
Vue 实现单选和多选
qq_41548644的博客
11-08 3063
日常工作中，UI 库中 单选/多选 组件并不一定非常符合业务需求。这时候，不妨自己动手搞一个。 单选 思路 选中标识值与对象标识匹配时（本例使用索引），给所在标签添加选中样式；点击标签时，更改选中标识值。 代码： <template> <ul> <li v-for="(city, index) in cityList" :key="index" :class="{ checked: index === checkedIndex
备用：Dijkstra C++实现
weixin_44182138的博客
11-05 561
typedef struct{ int distance, path; bool visited; }Grap; typedef struct{ int to, cost; }Edge; Grap G[maxn]; vector<Edge> E[maxn]; void Dijkstra(Grap* G, int S, int T) { G[S].distance = 0; heap.insert(S); while(!heap.empty()) { int V = heap.
Vue3单选框（Radio）
Mr Dear的博客
03-29 6047
用于在多个备选项中选中单个状态，功能丰富，简单易用！
vue中 单选、多选、全选小功能
Yijing_Wei的博客
05-10 1238
前端 vue 小功能 单选 多选 全选 uniapp 功能
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
10-18
主要介绍了Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题,非常不错，具有参考借鉴价值，需要的朋友可以参考下
vue例子（实现单选、多选、弹窗等功能）
07-24
首先，单选和多选是网页表单中常见的数据输入方式。在Vue.js中，我们可以利用v-model指令来双向绑定数据，实现视图和模型的实时同步。对于单选，我们通常会用到HTML的`<input type="radio">`元素，配合v-model和v-...
使用Vue动态生成form表单的实例代码
08-27
FormCreate是一个基于Vue的动态form表单生成器，可以生成具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素，以及省市区三级联动、时间选择、日期选择、颜色选择、文件/图片上传...
Vue实现单选、全选、反选
ScumStudy的博客
03-01 3987
<template> <div> <div><input type="checkbox" v-model="checkAll" />全选</div> <div><input type="checkbox" @change="inverse" />反选</div> <div class="fruit" v-for="(item, index) in fruits" :key="in
vue实现单选
m0_62487693的博客
02-23 252
/2：找到控制字体颜色的数据，更新数据，从而实现页面更新。4：当v-for 遇到事件如何知道是哪个元素触发的事件。1:分析页面应该用什么样的数组结构展示？//1：通过dom 直接变红色。2:将数据结构和模板结合展示。5：浏览器有什么样的响应。3:分析有哪些交互行为。
最好用的 5 个 Vue select 单选多选下拉组件 - 卡拉云
蒋川@卡拉云
02-26 1万+
单选 / 下拉 / 多选（select）组件在搭建 Vue 的 app 中特别常用，Vue select 除了用鼠标点选外，还可以有更多样的功能，比如搜索过滤，树状结构，tab 分组，按组选择等。这些高级功能都可以在第三方组件中找到，本文记录了我自己使用多年最好用的 5 款 Vue select 组件，每一款都经过我实际测试，推荐给大家。
【vue例子】利用vue实现单选框或者多选框
前端代码小白的日常博客
12-28 4163
/ 监听复选框项是否全部选中，如果checkedItem发生改变，那么这个函数就会执行。// 设置选项复选框初始状态为未选中,由于是一个数组,所以值为[],即为空。// 如果全选复选框被选中,则重新给选项复选框赋值,即选中所有的选项复选框。// 设置选中全选复选框后重新给选项复选框赋值,即选中所有的选项复选框。// 如果全选复未选框被选中,则设置为空值,即未选中所有的选项复选框。// 如果所有复选框项全部被选中,则全选复选框也被勾选。// 全选复选框状态改变监听事件。// 判断全选复选框是否选中。
vue实现单选按钮 页面单选框
u011013840的博客
09-26 6842
vue实现单选按钮
VUE实现全选和单选
Love_yl的专栏
07-12 4231
效果图： 单选 全部选中 HTML代码： <div class="hello"> <div> 　　<input type="checkbox" id="allCheck" @click="checkAll" v-model="checkIsAll"> 　　<label for="allCheck">全选</label> </div> <ul> 　　&l
vue实现单选多选
qq_34724739的博客
07-11 2675
vue实现单选多选
vue 实现单选框
coldriversnow的专栏
08-04 1381
【代码】vue 实现单选框。
vue.js写出表单中单选按钮、复选框、下拉列表、单行文本框、多行文本框、按钮的控件是什么
05-05
Vue.js中常用的表单控件包括： - 单选按钮：使用`<input type="radio">`标签，通过`v-model`指令绑定数据。 - 复选框：使用`<input type="checkbox">`标签，通过`v-model`指令绑定数据。 - 下拉列表：使用`<select>`标签和`<option>`标签，通过`v-model`指令绑定数据。 - 单行文本框：使用`<input type="text">`标签，通过`v-model`指令绑定数据。 - 多行文本框：使用`<textarea>`标签，通过`v-model`指令绑定数据。 - 按钮：使用`<button>`标签，可以绑定点击事件。 例如，使用单选按钮： ``` <template> <div> <input type="radio" id="male" value="male" v-model="gender"> <label for="male">Male</label> <input type="radio" id="female" value="female" v-model="gender"> <label for="female">Female</label> </div> </template> <script> export default { data() { return { gender: '' } } } </script> ``` 使用下拉列表： ``` <template> <div> <select v-model="selected"> <option disabled value="">Please select one</option> <option v-for="option in options" :value="option.value">{{ option.text }}</option> </select> </div> </template> <script> export default { data() { return { selected: '', options: [ { value: 'apple', text: 'Apple' }, { value: 'banana', text: 'Banana' }, { value: 'orange', text: 'Orange' } ] } } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值