位置: 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)

  • 印花税的纳税人是买方还是卖方
  • 上月社保未扣款怎么回事
  • 维修费开具发票
  • 物业缴纳发票可以抵税吗
  • 要补交税怎么办
  • 现金流是资产吗
  • 核定征收可以享受小微企业税收优惠吗
  • 营改增后建筑公司账务处理
  • 企业的季度所得税怎么算
  • 建帐时库存的原材料如何入帐?
  • 金蝶软件怎么设置会计科目
  • 营改增后建筑行业税率
  • 企业从事生产经营活动时所持有的基本信念
  • 基本账户代发代扣怎么操作
  • 财务费用负数是什么意思
  • 电脑怎么搜索文档
  • 收到退回款项
  • 企业职工教育经费
  • 工程安装成本分录
  • 劳务服务包括哪些范围
  • bios boot设置
  • 出口退税转内销的话如何算发票金额
  • 已提减值准备的固定资产报废怎么填写
  • 企业以物易物如何确认收入
  • oppor11s输入法怎么清除记忆
  • laravel定时任务如何实现的
  • 中医诊所的税收分类编码
  • java+php
  • 人力资源管理公务员岗位
  • 银行的抵债资产会过到银行名下吗
  • 农民工专用账户回执单
  • php中使用什么函数来定义常量
  • 员工为公司垫付的钱会计分录
  • 帝国cms栏目自定义字段
  • 为什么结转材料成本差异
  • 售后领料怎么做会计分录
  • 小规模减免的增值税要交所得税吗
  • 研发费用归集的主要范围有哪些
  • 购买展示样品是指什么
  • 应收账款周转率分析
  • 银行付款退回重付怎么办
  • 预付账款的相关认定
  • 发行优先股的发行费用
  • 什么叫进项税率
  • 固定资产有尾款怎么入账
  • 工程竣工后发生工程的保修费用入哪个科目?
  • 增值税科目设置成多栏式还是三栏式好
  • sqlserver数据库优化的几种方式
  • mysql中的ifnull函数
  • centos的版本有哪些
  • 屏蔽系统
  • win8升级win10系统会卡吗
  • ubuntu和window双系统
  • win10预览版好吗
  • windows中常用的菜单有哪三个
  • 如何关闭office开机自启动
  • xp电脑繁体系统改简体
  • windows7如何设置时间格式
  • linux ssh默认端口
  • python函数enumerate
  • unity3d 代码
  • bash linux命令
  • html图像元素
  • python3m
  • 圆形图表分析怎么做
  • shell脚本遍历
  • js移动dom
  • unity破解安装教程
  • Android 自定义控件
  • bootstrap和css的关系
  • javascript基础
  • androidstudio offline
  • 河北电子税务局如何添加办税人员
  • 季度税额怎么算
  • 青岛已开通几条地铁线路
  • 简述进料加工对中国的意义
  • 什么情况适用简易诉讼程序
  • 汽车发票含税吗
  • 贵州泉源会计服务有限公司花溪店位置
  • 小规模纳税人是按月还是按季度申报增值税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设