vue学习笔记之：单选框、复选框、下拉列表框的数据绑定操作

最新推荐文章于 2024-06-19 16:55:13 发布
最新推荐文章于 2024-06-19 16:55:13 发布
阅读量1.2k 收藏 8
点赞数 1
分类专栏： 前端 vue 文章标签： vue 双向绑定 单选框 复选框 下拉框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guxuhua123_01/article/details/102570547
版权
vue的一个很重要的特性就是数据绑定，而核心的指令就是：v-model使用的话分为如下步骤： 第一步：data属性中定义好绑定的值的变量 第二步：标签上通过v-model绑定好该变量 第三步：无论上通过插值表达式{{}}的方式还是在代码里通过this.的方式，都是可以获取到变化后的值的简单的实例如下：<!DOCTYPE html><html la...
摘要由CSDN通过智能技术生成

vue的一个很重要的特性就是数据绑定，而核心的指令就是：v-model

使用的话分为如下步骤：

  第一步：data属性中定义好绑定的值的变量

  第二步：标签上通过v-model绑定好该变量

  第三步：无论上通过插值表达式{ {}}的方式还是在代码里通过this.的方式，都是可以获取到变化后的值的

简单的实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue多行文本的数据绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>多行文本输入内容：</p>
    <p style="white-space: pre-line">{
  {message}}</p>
    <textarea v-model="message" placeholder="请输入多行文本"></textarea>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: '&
最低0.47元/天 解锁文章
枫林血舞
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue下拉框动态数据绑定_vue开端 -- 做个工匠 - 1 数据绑定 以及 指令
weixin_33800724的博客
02-01 8031
嗨朋友！感谢光临我的博客 还没上岸的我 还在努力之中，本文中理解有错的时候还请您指点 本人也很喜欢爬虫 欢迎来到本人的公众号 一起交流 公众号：Linux下撸python 能得指点是晚辈荣幸絮叨一下简单介绍安装方法scriptnpm下载创建一个实例挂载点el存放数据data函数methods第一个hello vue指令v-xxv-htmlv-textv-pre填充原始信息v-bind 动态数据绑...
vue常用指令、动态绑定样式、动态添加类名、单选、多选
hrj970808的博客
11-09 1017
vue常用指令 1、v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 2、v-else-if 必须和v-if一起用才可以 不能单独用 而且必须在v-if下面 中间有别的标签也会报错。 3、v-else 必须和v-if一起用才可以 不能单独用 而且必须在v-if下面 中间有别的标签也会报错。 4、v-show：根据表达式之真假值，切换元素的 display CSS 属性。 5、v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 k
Vue.js下拉列表与输入框绑定
跟着BOSS有肉吃
01-14 5229
假设自助机的外观有以下几种：  在对自助机进行管理时想要添加一台新的自助机，需要填写它的外观信息。 我们希望，在下拉框中选择自助机外观时，能自动填写自助机外观对应的编号。 数据库表asm_dict如下： CREATE TABLE `asm_dict` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键ID', `propK...
Vue的复选框、单选框、下拉菜单数据绑定
最新发布
weixin_57564706的博客
06-19 480
复选框需要一个value 和v-model value表示值，v-model表示需要双向绑定的内容。vue的input复选框、单选框的数据绑定。单选框和复选框都需要有一个相同的name。代码是一个调查问卷页面，可以直接使用。
vue基础核心（五）收集表单数据：输入框&单选框&复选框&密码框&下拉框&文本框（文章中所有代码均可运行，有问题可留言）
weixin_47687315的博客
03-07 687
<body> <div id="root"> <!-- 输入框：v-model和vue进行绑定，输入的内容就是value --> <!-- trim修饰符：不收集前后空格，但中间空格无法识别 --> 账号：<input type="text" name="id" v-model.trim="id"></input><br> <!-- 密码框：v-.
没时间学 Vue (5) —— 绑定（四）：面向单选、复选和选择框的 v-model
可乐天尊@小七星球
03-29 376
上一篇讲了各种各样的文本框，今天接着说其他类型的输入组件。 本着第一性原理的思路，我们还是按照下面的套路来折腾 v-model 和这些输入组件。 1）看一下最核心的 HTML 原生元素的用法； 还是要多看https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Basic_native_form_controls。 2）试着用 v-model 来折腾一下； 3）做一个 <div> 把折腾后的 v-model 的结果显示出来，...
Vue -- 双向数据绑定
天行健 君子以自强不息，地势坤 君子以厚德载物。
05-18 3081
1. Vue--双向数据绑定 Vue.js是一个MVVM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。 1.1 在表单中使用双向数据绑定 你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇， 但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 注意：v-model会忽略所有表单元素
vue.js实现单选框、复选框和下拉框示例
10-19
本篇文章主要介绍了vue.js实现单选框、复选框和下拉框示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue表单绑定实现多选框和下拉列表的实例
08-29
vue表单绑定实现多选框和下拉列表的实例 在 Vue 框架中，实现多选框和下拉列表的实例是非常有用的。本文将介绍如何使用 Vue 实现多选框和下拉列表的实例，并且提供了详细的代码示例。 多选框的实现 在 Vue 中，...
vue实现带复选框的树形菜单
10-16
在Vue.js框架中实现带复选框的树形菜单是一种常见的UI设计，通常用于显示层次结构的数据，并允许用户进行多级选择。这个例子展示了如何结合第三方库ZTree来创建这样一个功能。ZTree是一个基于JavaScript的树状菜单...
【小白读vue官方文档】vue-model给复选框绑定值
weixin_41604040的博客
11-02 928
vue-model给复选框绑定值个人理解 今天看vue官方文档的时候，有句话不理解： 复选框 <input type="checkbox" v-model="toggle" true-value="小猫" false-value="小狗" > // 当选中时 vm.toggle === '小猫' // 当没有选中时 vm.toggle === '小狗' 这里的 true-value和 false-valueattribute 并不会影响输入控件的 valueattribute，
Vue.js：使用v-model创建单选和多选下拉列表
零小唬的博客
01-11 1602
Vue.js：使用v-model创建单选和多选下拉列表
Vue表单控件绑定
qq_46149597的博客
11-04 978
应用v-model绑定文本框、应用v-model绑定复选框、应用v-model绑定下拉菜单、应用v-model绑定到动态属性
在vue中如何在input中点击时，选中输入框中所有内容
牛先森家的博客
09-12 9933
在vue中如何在input中点击时，选中所有内容 <input type="text" :placeholder="showLogin === true ? '请输入手机号':'请输入用户名/邮箱'" v-model="userPhone" @click="selectValue($event)" /> methods: { // 点击选中所有 selectValue(e) { cons
【Vue3】表单数据的双向绑定：v-model
早睡早起长头发的博客
08-04 4001
一、单行文本框的绑定 二、多行文本区的绑定 三、复选框的绑定 四、单选按钮的绑定 五、下拉列表框的绑定 六、常用的两个修饰符
Vue 中既可以输入也可以下拉选择(改进版)
技术记录薄
01-16 3907
项目场景：由于前些天，弄了一个下拉选择，也可以输入的，input输入框，但我感觉效果并不是很优美，所以今天对以前的代码，改进并进行优化。达到一个完美的效果。
Vue在单选框和下拉框中使用双向数据绑定
pillow233的博客
12-05 2871
Vue在单选框和下拉框中使用双向数据绑定在这里插入代码片 单行文本： <head> <meta charset="UTF-8"> <title>Java</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></sc...
手敲版干货！三分钟学会vue中v-model绑定表单事件（单选、多选、下拉选）~
hj0556的博客
06-05 1070
1.关于v-model v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据。 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。 2.v-model 在不同的元素使用不同的 property 并抛出不同的事件 text 和
elementUI单选多选框动态绑定显示内容和绑定值
xiaoqingqing的博客
11-20 5455
elementUI单选多选框动态绑定显示内容和绑定值，挺简单的内容，总是不熟练，小小记录一下。 单选： <!-- 单选框 --> <el-radio-group v-model="regionType"> <el-radio v-for="item in regionTypes" :label="item.label" :key="item.label">{{item.text}}</el-radio>
Vue中使用v-for绑定多组复选框和单选框
05-25
在Vue中，可以使用v-for指令绑定多组复选框和单选框。下面分别介绍如何绑定多组复选框和单选框。 1. 绑定多组复选框 ```html <template> <div> <div v-for="item in items" :key="item.id"> <input type="checkbox" :id="item.id" :value="item.value" v-model="checkedItems"> <label :for="item.id">{{ item.label }}</label> </div> </div> </template> <script> export default { data() { return { items: [ { id: 1, value: 'apple', label: '苹果' }, { id: 2, value: 'banana', label: '香蕉' }, { id: 3, value: 'orange', label: '橙子' } ], checkedItems: [] } } } </script> ``` 上述代码中使用v-for指令遍历items数组，生成多组复选框。使用v-model指令将复选框的选中状态与checkedItems数组绑定，checkedItems数组会根据选中的复选框动态更新。 2. 绑定多组单选框 ```html <template> <div> <div v-for="item in items" :key="item.id"> <input type="radio" :id="item.id" :value="item.value" v-model="selectedItem"> <label :for="item.id">{{ item.label }}</label> </div> </div> </template> <script> export default { data() { return { items: [ { id: 1, value: 'apple', label: '苹果' }, { id: 2, value: 'banana', label: '香蕉' }, { id: 3, value: 'orange', label: '橙子' } ], selectedItem: '' } } } </script> ``` 上述代码中使用v-for指令遍历items数组，生成多组单选框。使用v-model指令将单选框的选中状态与selectedItem变量绑定，selectedItem变量会根据选中的单选框动态更新。请注意，单选框的name属性应该相同，这样才能实现单选的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值