vue如何动态绑定v-model

如图所示
有三个字段要从弹出的输入框取值
点击字段会弹出上面的弹窗,输入input会响应变化,比如
点击身高,弹出输入框,输入值后身高后面会跟着一个同样的值
点击体重,弹出输入框,输入值后体重后面会跟着一个同样的值
。。。
那么问题来了,如何动态绑定input的v-model呢?
方法:
加一个当前选择的状态,
data(){
return {
inputData:"",
weight:"",
height:"",
current:0
}
}
根据所点击的项目设置current
身高 this.current=1
体重 this.current=2
.
.
.
使用watch监听input
watch:{
inputData(){
if(this.status==1){
this.height = this.inputData
}
if(this.status==2){
this.weight = this.inputData
}
}
}
vue如何动态绑定v-model的更多相关文章
- Vue.js 动态绑定class
Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新 ...
- Vue之动态绑定CSS样式
demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- vue中动态循环model
vue动态循环model与angular有所不同,angular直接定义一个数组,然后传入循环列表的index即可. 而vue不仅需要定义一个数组,还需要通过接口读出循环的数组长度,然后在create ...
- vue.js动态绑定input的checked
不管<input type='radio checked='true''> 你的checked属性值是true或者false,他都会选中. 其实原理是这样的,复选框里只要有checked ...
- vue中动态绑定class
我用的element-ui primary默认是这个颜色,ui设计的是这个颜色所以我们先要重写 .el-button--primary的样式 因为默认是没有勾选的所有事灰色所以下面重写样式为灰色 .e ...
- vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...
- div contenteditable 代替Textarea,做成Vue属性动态绑定
前言 一般都是用Textarea 文本来编辑,但发现可以用 div contenteditable = “true”,这个属性来搞定 <div contenteditable=true plac ...
- Vue——v-for动态绑定id的问题
问题:在Vue中,会遇到许多个多选框,倘若数量很庞大那么一个一个input框.label节点寻找,这样操作很繁琐. 直接上解决方案吧: html页面: <ul v-for="(item ...
- vue 中动态绑定class 和 style的方法
先列举一些例子 :class="['content',{'radioModel':checkType}]" :class="['siteAppListDirNode',{ ...
随机推荐
- C# PDF 填值 填充数据
看效果图 /// <summary> /// 赛事结果PDF /// </summary> /// <param name="model"> ...
- Mysql 指定字段数据排序 以及django的实现
业务场景: mysql 查询 select * from dormitory_applysettleorder order by FIELD(status,40) desc django 实现: or ...
- marquee标签实现跑马灯效果--无缝滚动
今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...
- BZOJ3331 [BeiJing2013]压力[圆方树+树上差分]
圆方树新技能get.具体笔记见图连通性问题学习笔记. 这题求无向图的必经点,这个是一个固定套路:首先,一张连通的无向图中,每对点双和点双之间是以一个且仅一个割点连接起来的(如果超过一个就不能是割点了) ...
- location - URL
1.hash:获取或设置href 属性中跟在数字符号 # 之后的内容 2.跳转页面: 1)location.href 2)location.replace() 3)location.reload(tr ...
- 在cubemx中使用freertos中的注意事项
就是使用信号量等rtos自带特性的时候,务必先初始化然后在发生信号量或接收. 而且在中断中发送信号量或队列的时候,务必把使能中断的语句放在初始化freertos之后,尤其是cubemx生成的代码,默认 ...
- 5、docker容器数据卷: -v添加共享传递容器数据卷
1.是什么 1.docker理念 先来看看Docker的理念:* 将运用与运行的环境打包形成容器运行 ,运行可以伴随着容器,但是我们对数据的要求希望是持久化的* 容器之间希望有可能共享数据 2.保 ...
- Navicat连接虚拟机上的mysql
刚刚在虚拟主机上安装mysql, 想使用Navicat 操作mysql. 但是连接不上 报错: 2003 - can't connect to MySQL server on '192.168.1 ...
- [Luogu] 排序机械臂
https://www.luogu.org/problemnew/solution/P3165 预处理 我们会发现一个问题:高度是无序的,而splay中要求有序,否则kth不能正确求解.不需要求高度, ...
- 第02组团队Git现场编程实战
GitHub仓库地址 click here 1.组员职责分工 组员 职责分工 黄智.赵镇 百度地图API使用 潘松波.颜志鹏 写分别测评福州人均消费50以下,50-100.100-200.200以上最 ...