位置: IT常识 - 正文

Vue中如何使用v-model双向数据绑定select、checked等多种表单元素(vue中如何使用axios)

编辑:rootadmin
Vue中如何使用v-model双向数据绑定select、checked等多种表单元素

推荐整理分享Vue中如何使用v-model双向数据绑定select、checked等多种表单元素(vue中如何使用axios),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中如何使用V-model完成千克与克之间的换算,vue中如何使用路由,vue中如何使用less,vue中如何使用rem布局,vue中如何使用ajax,vue中如何使用V-model完成千克与克之间的换算,vue中如何使用路由,vue中如何使用V-model完成千克与克之间的换算,内容如对您有帮助,希望把文章链接给更多的朋友!

 v-model 指令可以用在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

基础用法:

<div id="APP"><input type="text" v-model:value="tel" ><p>您的手机号:{{tel}}</p></div>const vm = new Vue({el: "#APP",data(){return {tel: 15503931234,}},});

注:当我们修改输入框里的内容时,下方的内容也会跟着变化。也就是说我们修改内容时,改变了 data 中的数据,data 中的数据变化后又重新渲染了 p 标签里的内容。

 v-model 与 v-bind 指令的区别:<div id="APP"><input type="text" :value="tel" ><p>您的手机号:{{tel}}</p></div>const vm = new Vue({el: "#APP",data(){return {tel: 15503931234,}},});

注:使用 v-bind 绑定数据,修改输入框里的内容时,下方的内容不会发生变化。也就是说我们修改内容时,不会改变 data 中的数据。

 Vue 中两种数据绑定方式的区别:

单向数据绑定 v-bind :数据只能从 data 流向页面。

双向数据绑定 v-model :数据不仅能从 data 流向页面,还可以从页面流向 data 。

 v-model 指令简写:

v-model:value 也可以简写为 v-model ,因为 v-model 默认收集的就是 value 值。

<div id="APP"><input type="text" v-model="tel" ><p>您的手机号:{{tel}}</p></div>const vm = new Vue({el: "#APP",data(){return {tel: 15503931234,}},});

注:双向数据绑定一般都应用在表单类元素上(如:input、select等)。

textarea 多行文本使用 v-model:<div id="APP"><textarea placeholder="请输入简介" v-model="content"></textarea><p>您的简介:{{content}}</p></div>const vm = new Vue({el: "#APP",data(){return {content: "",}},});Vue中如何使用v-model双向数据绑定select、checked等多种表单元素(vue中如何使用axios)

 单选按钮使用 v-model:<div id="APP"><label><input type="radio" value="男" v-model="sex"> 男</label><label><input type="radio" value="女" v-model="sex"> 女</label><p>您已选择:{{sex}}</p></div>const vm = new Vue({el: "#APP",data(){return {sex: "男",}},});

注:当选中时,sex 为 value 中的值。

单个复选框使用 v-model:<div id="APP"><input type="checkbox" v-model="status"><p>是否选中:{{status}}</p></div>const vm = new Vue({el: "#APP",data(){return {status: true,}},});

注:当选中时,status 为 true 。未选中时,status 为 false .

 单个复选框指定 v-model 选中值:<div id="APP"><input type="checkbox" v-model="status" true-value="同意" false-value="不同意"><p>您是否同意:{{status}}</p></div>const vm = new Vue({el: "#APP",data(){return {status: "同意",}},});

注:当选中时,status 为同意 。未选中时,status 为不同意 。

多个复选框使用 v-model:<div id="APP"><label><input type="checkbox" value="草莓" v-model="list"> 草莓</label><label><input type="checkbox" value="蓝莓" v-model="list"> 蓝莓</label><label><input type="checkbox" value="火龙果" v-model="list"> 火龙果</label><p>您已选择:{{list}}</p></div>const vm = new Vue({el: "#APP",data(){return {list: ["草莓"],}},});

注:多个复选框,需要绑定到同一个数组上 。选中的值,会自动添加到数组中。

select 单选时使用 v-model:<div id="APP"><select v-model="price"><option value="0">请选择</option><option value="200">草莓</option><option value="100">蓝莓</option><option value="150">火龙果</option></select><p>您需要支付:{{price}} 元</p></div>const vm = new Vue({el: "#APP",data(){return {price: 0,}},});

注:如果 v-model 表达式的初始值未能匹配任何选项,select 元素将被渲染为未选中状态。所以更推荐给 price 一个默认值。

 select 多选时使用 v-model:<div id="APP"><select v-model="list" multiple><option value="草莓">草莓</option><option value="蓝莓">蓝莓</option><option value="火龙果">火龙果</option><option value="香蕉">香蕉</option><option value="苹果">苹果</option></select><p>您已选择:{{list}}</p></div>const vm = new Vue({el: "#APP",data(){return {list: ["草莓","火龙果"],}},});

注:添加 multiple 属性后,按住 Ctrl 键再点击选项可以多选内容,多选时需要绑定到同一个数组上。

原创作者:吴小糖

创作时间:2023.2.28

本文链接地址:https://www.jiuchutong.com/zhishi/290857.html 转载请保留说明!

上一篇:【前端开发工具】VUE3 devtools安装(前端软件开发工具)

下一篇:日落后的托莱多全景,西班牙 (© Frank Fischbach/Alamy)

  • 在计算机网络中通常把提供并管理共享资源的计算机称为(在计算机网络中,英文缩写WAN的中文名是)

    在计算机网络中通常把提供并管理共享资源的计算机称为(在计算机网络中,英文缩写WAN的中文名是)

  • 微信视频流量一分钟大概多少(微信视频流量一分钟多少钱)

    微信视频流量一分钟大概多少(微信视频流量一分钟多少钱)

  • net err connection reset什么意思(neterrconnectionrefused的原因)

    net err connection reset什么意思(neterrconnectionrefused的原因)

  • 移动的dns地址是什么(移动的dns 设置成多少)

    移动的dns地址是什么(移动的dns 设置成多少)

  • 面对面快传找不到文件(面对面快传找不到应用)

    面对面快传找不到文件(面对面快传找不到应用)

  • 计算器数字键没反应了咋回事(计算器数字键没反应)

    计算器数字键没反应了咋回事(计算器数字键没反应)

  • 智能材料有哪些(智能材料有哪些问题如何解决?)

    智能材料有哪些(智能材料有哪些问题如何解决?)

  • 苹果怎么长屏截图聊天记录(苹果怎么长屏截图)

    苹果怎么长屏截图聊天记录(苹果怎么长屏截图)

  • 小米黑鲨充不进去电怎么办(黑鲨充电充不进去)

    小米黑鲨充不进去电怎么办(黑鲨充电充不进去)

  • 短信拦截怎么查(短信拦截在哪里查)

    短信拦截怎么查(短信拦截在哪里查)

  • 华为nova6防不防水(华为nova6的防误触在哪)

    华为nova6防不防水(华为nova6的防误触在哪)

  • 快充充一次影响大吗(快充充一宿)

    快充充一次影响大吗(快充充一宿)

  • 小米8怎么老弹出网络未连接(小米8弹广告)

    小米8怎么老弹出网络未连接(小米8弹广告)

  • ps滤镜怎么安装(ps滤镜怎么安装到电脑上)

    ps滤镜怎么安装(ps滤镜怎么安装到电脑上)

  • 酷狗音乐怎么转发陌陌(酷狗音乐怎么转换mp3格式)

    酷狗音乐怎么转发陌陌(酷狗音乐怎么转换mp3格式)

  • 荣耀9x有指纹解锁吗(荣耀9x指纹解锁失灵)

    荣耀9x有指纹解锁吗(荣耀9x指纹解锁失灵)

  • office怎么用(wps office怎么用)

    office怎么用(wps office怎么用)

  • 小红书客服怎么联系(小红书客服怎么做)

    小红书客服怎么联系(小红书客服怎么做)

  • deepin20怎么卸载软件程序? deepin卸载应用的两种方法(win10卸载deepin)

    deepin20怎么卸载软件程序? deepin卸载应用的两种方法(win10卸载deepin)

  • Mac系统下对U盘进行格式化图文攻略(mac u盘)

    Mac系统下对U盘进行格式化图文攻略(mac u盘)

  • 苹果Mac隐藏壁纸在哪里?Mac隐藏壁纸查找教程(macbook隐藏)

    苹果Mac隐藏壁纸在哪里?Mac隐藏壁纸查找教程(macbook隐藏)

  • win7纯净版系统kb2670838补丁安装失败的解决方法(win7纯净版系统之家)

    win7纯净版系统kb2670838补丁安装失败的解决方法(win7纯净版系统之家)

  • 阿尔高阿尔卑斯山脉的Schrecksee湖,德国巴伐利亚 (© Andreas Hagspiel/EyeEm/Getty Images)(阿尔卑斯山百度百科)

    阿尔高阿尔卑斯山脉的Schrecksee湖,德国巴伐利亚 (© Andreas Hagspiel/EyeEm/Getty Images)(阿尔卑斯山百度百科)

  • 未达起征点增值税能否开票
  • 个人抬头的发票可以报销吗
  • 去参加博览会的英文
  • 会计核算是否健全 填错了有影响吗
  • 自产委托加工用于简易计税
  • 通行费发票勾选认证有多少就可以抵扣多少吗
  • 劳务分包和劳务外包
  • 增值税一般纳税人证明怎么查询
  • 经济法中企业营业收入包括哪些?
  • 固定资产报废变卖收入缴税账务处理
  • 年会奖金多少合适
  • 企业开票代码是什么意思
  • 企业法人不发工资合法吗
  • 房产企业竞标取消通知
  • 开业好不好
  • 普票红字发票怎么写摘要
  • 城镇土地使用税每年都要交吗
  • 物业公司收取电费加价依据
  • 餐饮费开专票
  • win101703怎么看
  • 企业收到留抵退税宣传报道
  • 交割单和对账单一样吗
  • 备用金的会计分类
  • 主合同主体变更,从合同怎么处理
  • 树木种植公司
  • php封装接口
  • php支付功能
  • deepin隐藏分区
  • ipssvc.exe - ipssvc是什么进程 有什么作用
  • hprj是什么文件
  • 修改系统散热方案
  • 招待费的范畴
  • 记账凭证填制的依据
  • 现金解款单怎么读
  • php yield 异步
  • PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
  • 一借多贷的会计分录格式
  • qt opencv ffmpeg
  • 销售自己使用过的物品的税率
  • python处理mysql如何拿到表头
  • 发票税金计入什么会计科目
  • 固定资产清理怎么报税呢
  • 股权转让的会计资料归谁所有
  • 专利技术会计分录怎么做
  • 多交了社保
  • 收到暂估跨年发票怎么办
  • 公司购买银行理财产品账务处理
  • 国家规定房屋买卖中介费
  • 转账支票的特点有哪些
  • 怎么取最大值函数
  • 未分配利润转增股本法人股东要交税吗
  • 会计行政法规包括哪些条例?具体说明?
  • mysql tmp_table_size和max_heap_table_size大小配置
  • java程序怎么直接运行
  • mysql5.5安装配置教程
  • win8.1配置要求
  • 亲测可用抖音低价单赚派费项目
  • 如何设置滑屏方式
  • 重装系统开机出现几个系统
  • fdreader.exe是什么程序
  • linux修改22端口号
  • win8功能
  • jquery日期控件onchange事件
  • CalledFromWrongThreadException: Only the original thread that created a view
  • javascript有哪些
  • unity如何成一组
  • vue switch组件
  • js文件设置编码
  • nodejs web服务器
  • android studio的app
  • adb命令ls
  • 税务机关落实六保六稳
  • 咨询服务类公司的账务处理
  • 彩票中500万自己能得多少
  • 一般纳税人获得自产自销免税发票怎么处理
  • 营转非的政策
  • 土地增值税有哪些税收优惠
  • 广东电子税务局官网登录入口手机版
  • 税审工作流程
  • 个人所得税的工资比实际的多
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设