VUE自动处理radio、checkbox、select

已于 2023-11-24 09:25:18 修改
阅读量267 收藏
点赞数
分类专栏： VUE 文章标签： vue.js 前端 javascript
于 2023-11-23 18:12:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuruiaaa/article/details/134583547
版权
radio：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <label for="male">
    <input type="radio" id="male" value="男" name="sex" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" value="女" name="sex" v-model="sex">女
  </label>
  <h2>您选择的性别是：{{sex}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      sex: '男'
    }
  })
</script>
</body>
</html>

输出：

checkbox：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  1.checkbox单选框-->
  <label for="">
    <input type="checkbox" id="license" v-model="isAgree">同意协议
  </label>
  <h2>您选择的是：{{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button><br>
<!--  2.checkbox复选框-->
  <input type="checkbox" value="basketball" v-model="hobbies">篮球
  <input type="checkbox" value="badminton" v-model="hobbies">羽毛球
  <input type="checkbox" value="football" v-model="hobbies">足球
  <input type="checkbox" value="table tennis" v-model="hobbies">乒乓球
  <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>

 输出：

select：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--  1.select选择一个-->
  <select name="favorite" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="西瓜">西瓜</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您最喜欢的水果：{{fruit}}</h2>
  <!--  2.select选择多个-->
  <select name="favorite" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="西瓜">西瓜</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果：{{fruits}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      fruit: '',
      fruits: [],
    }
  })
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model的使用</title>
</head>
<body>
<div id="app">
  <!--  ■【值绑定,举例：】-->

  <!--  -初看Vue官方值绑定的时候,我很疑惑: what the hell is that ?
        -但是仔细阅读之后,发现很简单,就是动态的给value赋值而已
            口我们前面的value中的值,可以回头去看一下,都是在定input时候直接给定的。
            口但是真实开发中,这些input的值可能是从网络获取或定义在data中的
            口所以我们可以通过v-bind:value动态的给value绑定值。
            口这不就是v-bind吗?-->
  <p>值绑定:也就是数据不是直接写死的，通过动态的值来进行绑定</p>
  <select v-model="fruitsValueBindChoice" multiple>
    <option v-for="item in fruitsValueBind" :value="item">{{item}}</option>
  </select>
  <p>您选泽的是：{{fruitsValueBindChoice}}</p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      fruitsValueBind: ["手机", "电脑", "耳机", "音响", "话筒"],//值绑定part1
      fruitsValueBindChoice: [] //值绑定part2
    }
  });
</script>
</body>
</html>

输出：

比起很多年前用jquery来操作这三个，要好很多很多了。

众乐乐_2008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用input:radio实现单选，并默认选中数据库中的值
lx_hz的博客
04-23 3588
jsp: <div class="radio-box"> <input name="sex" type="radio" value="0" checked> <label>男</label> </div> <div class="radio-box"> <input name="sex" typ...
vue input type=“radio“ 动态赋值
weixin_45281571的博客
02-06 3127
vue 页面 <input type=“radio” style=“zoom: 205%;” name=“pay” :value=“item.name” v-model=“radio” @click=“confirm” /> {{item.name}} js方法 data() { return { radio: ‘A’, //单选按钮默认值 prefixName: [ //集合 { name: “A”, }, { name: “B”,
vue中radio、select设置默认选中
qq_26993175的博客
12-15 4106
radio默认选中： <span v-for="(item,index) in refArray"> <input type="radio" name="inspectionRef" v-bind:value="item.id" v-model="defaultInspectionRef" class="radio"/>{{item.name}} </span> self.defaultInspectionRef = 默认选中的value; select默认选中：
vue 中checkbox，radio，实现全选，默认选择，获取选中的value 以及修改checkbox，radio的样式
weixin_42439024的博客
12-09 1万+
这里把checkbox，radio，实现全选，默认选择，获取选中的value 以及修改checkbox，radio的样式放在了一个页面中了 老规矩先上图 1.radio单选获取其值 2.checkbox获取其值以及全选功能 上代码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta
vue自定义单选框radio
qq_39695210的博客
08-03 7650
vue自定义radio单选框，radio默认样式修改，vue radio单选框，使用v-for循环的radio单选框，js自定义radio单选框。qq裙933053581。
radio、checkbox、select等选择标签的总结
03-24
在网页设计和开发中，`radio`、`checkbox` 和 `select` 是三种常见的表单元素，用于收集用户输入的数据。这些元素都是HTML语言的一部分，是构建交互式Web页面的关键工具。下面是对这三个标签的详细解释和总结： 1. ...
Vue.JS入门教程之处理表单
11-28
在处理表单方面，Vue提供了一种高效且直观的方式。本文将深入探讨Vue.JS中的表单处理基础，包括文本输入、复选框、单选按钮、选择下拉框以及一些高级特性。 首先，让我们看看基本的文本输入。Vue.JS中的`v-model`...
apicloud中vue处理购物车全选单选
01-15
使用vue在apicloud实现 购物车的全选单选 只要是拿一个字段作区分 那他去作区分 最麻烦的就是ios不能全选 但是我是经过api.systemType 做过处理 ios和安卓的区分 <input class="aui-radio" v-model="vo.is_...
使用JQuery封装的Select&Checkbox&Radio脚本-维豪信息技术有限公司内部
04-02
本文将深入探讨如何使用jQuery封装Select、Checkbox和Radio元素，以提高前端开发效率并确保跨浏览器兼容性。 一、jQuery封装Select 在HTML中，`<select>`元素用于创建下拉菜单。在jQuery中，我们可以方便地操作...
【vue】v-model与单选radio、checkbox、多选checkbox、select结合使用、以及三种修饰符展示
qq_44897899的博客
10-29 1763
代码 <div id="app"> <label for="male"> <!--name属性相同的input标签即为一组,单选框实现互斥效果（或者v-model绑定同一个变量{{}}）， 只有设置了name属性的表单元素才能在提交表单时传递它们的值。--> <input type="radio" name="sex" id="male" value="男" v-model="sex">男.
vue radio单选框，获取当前项（每一项）的value值
热门推荐
好巧的博客
12-24 3万+
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。本文使用了lable关联选中，如果不需要，直接将循环语句 v-for 写在 input标签上即可。注意：需使用 change 事件，不是 click 事件。注意：需使用 change 事件，不是 click 事件。如果本篇文章对你有帮助的话，很高兴能够帮助上你。
vue 给checkbox 赋值_vuejs怎样实现列表中checkbox的双向绑定及初始化渲
weixin_33514582的博客
01-17 548
展开全部1.双向绑定可以绑定到同一个数组JackJohnMikeChecked names: {{ checkedNames | json }}这样可以不做任何处理，获得所有checked的checkbox。2.可是如32313133353236313431303231363533e78988e69d8331333365646239果需要初始化渲染，一部分checkbox被预选中，v-model需...
vue中单选和多选的获取
喜欢和羊一起玩耍的天蝎的博客
12-28 762
单选 {{radioValue}} //为了表示是同一组一般还可以给单选加上name属性 &lt;div&gt; &lt;input type="radio" value="radio01" v-model="radioValue"/&gt; radio &lt;/div&gt; &lt;div&gt; &lt;input type="radio&quot
【Vue学习笔记】获取表单数据——input、radio、checkbox、select、textarea
qq_44862029的博客
03-25 2794
目录一.获取表单数据（案例）1.效果2.代码二.总结三.参考 一.获取表单数据（案例） 1.效果 注意：这个案例只是简单的再前端输出获取的表单内容，并没有提交到后台 2.代码 <div class="root"> <form @submit.prevent="demo"> <!-- trim去掉首尾空格,中间的空格去不掉 --> 账号:<input type="text" v-model.trim
vue中使用v-model绑定单选按钮不能实现选中样式
YYYYYun的博客
11-03 2096
最近做一个vue项目，用到了单选按钮组 <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female 绑定之后为 <input type="radio" name="sex" value="male" v-mode...
vue表单中radio，checkbox数据绑定问题
ATTK_Time的博客
03-04 4055
vue中的checkbox，radio，提交发送的JSON格式问题
vue之单选框和复选框的绑定
Haines
12-23 1475
1.单个复选框，绑定的是布尔值 <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> 2.多个复选框，绑定的是数组 <div id='example-3'> <input type="c...
用vue怎么获选表单元素信息
weixin_48047636的博客
05-20 341
单选按钮值的获取 <template> <div> <span>男</span> <input type="radio" name="sex" value="1" v-model="key"> <br> <span>女</span> <input type="radio" name="sex" value="0" v-model="key" >
Vue.js 表单控件绑定 v-model
weixin_34384681的博客
10-15 353
v-model 主要用于input、textarea、select等表单控件元素上创建双向数据绑定，所谓双向绑定就是js中vue实例化的data对象的数据与其渲染的dom元素上的内容保持一致1、text 文本<divid="app"> <h1>`message`</h1> <inputtype="text"v-...
如何给vue页面所有input、select、button、radio、checkbox元素添加tabindex，并且按enter键可以控制元素的聚焦顺序
最新发布
06-08
在事件处理函数中，你可以遍历页面上所有的 `input`、`select`、`button`、`radio` 和 `checkbox` 元素，为它们添加 `tabindex` 属性，并设置正确的 `tabindex` 值，以便在用户按下 Enter 键时可以控制元素的聚焦...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值