如图所示
有三个字段要从弹出的输入框取值
点击字段会弹出上面的弹窗,输入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的更多相关文章

  1. Vue.js 动态绑定class

    Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新 ...

  2. Vue之动态绑定CSS样式

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  3. vue中动态循环model

    vue动态循环model与angular有所不同,angular直接定义一个数组,然后传入循环列表的index即可. 而vue不仅需要定义一个数组,还需要通过接口读出循环的数组长度,然后在create ...

  4. vue.js动态绑定input的checked

    不管<input type='radio checked='true''>  你的checked属性值是true或者false,他都会选中. 其实原理是这样的,复选框里只要有checked ...

  5. vue中动态绑定class

    我用的element-ui primary默认是这个颜色,ui设计的是这个颜色所以我们先要重写 .el-button--primary的样式 因为默认是没有勾选的所有事灰色所以下面重写样式为灰色 .e ...

  6. vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)

    组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...

  7. div contenteditable 代替Textarea,做成Vue属性动态绑定

    前言 一般都是用Textarea 文本来编辑,但发现可以用 div contenteditable = “true”,这个属性来搞定 <div contenteditable=true plac ...

  8. Vue——v-for动态绑定id的问题

    问题:在Vue中,会遇到许多个多选框,倘若数量很庞大那么一个一个input框.label节点寻找,这样操作很繁琐. 直接上解决方案吧: html页面: <ul v-for="(item ...

  9. vue 中动态绑定class 和 style的方法

    先列举一些例子 :class="['content',{'radioModel':checkType}]" :class="['siteAppListDirNode',{ ...

随机推荐

  1. 给datagrid一列中的数据加上单位

    { field:'computeRate', title:'完成百分比', width:100, align:'center', halign:'center', sortable:true, for ...

  2. Objective-C 之Extension

    Objective-C 之Extension class extension:类扩展 类扩展与 category 有相似性,但在编译时它只能被添加到已有源代码的一类中(该类扩展和该类同时被编译). 在 ...

  3. Mysql(七):视图、触发器、事务、存储过程、函数

    一 视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果集当做表来使用. 使用视图我们可以把查询过程中的 ...

  4. Systemd: Service File Examples

    大多数Linux发行版使用 systemd作为系统服务管理工具. systemctl是systemd的主要命令,用于管理控制服务. 这篇文章中将介绍如何创建允许你使用systemctl命令的sysyt ...

  5. Java中Static关键字详解以及静态变量和成员变量的区别

    一.static关键字的特点 (1)修饰成员变量.成员方法(2)随着类的加载而加载(3)优先于对象存在(4)被所有对象共享(5)可以通过类名调用 它本身也可以通过对象名调用 例如:main()方法由j ...

  6. java——Servlet

    类要实现Servlet接口: 主要功能,生成动态网页内容: HttpServlet重写doGet和doPost方法或者重写Service方法,完成对请求的响应: 如:get.post等请求的响应. - ...

  7. 大数据量时Mysql的优化

    (转自网络) 如今随着互联网的发展,数据的量级也是撑指数的增长,从GB到TB到PB.对数据的各种操作也是愈加的困难,传统的关系性数据库已经无法满足快速查询与插入数据的需求.这个时候NoSQL的出现暂时 ...

  8. 关于datagridview控件如何动态改变行数问题

    首先要把单元格转换成txt文本框然后根据TextChanged事件来进行修改就可以实现 private void Return_DGV_EditingControlShowing(object sen ...

  9. 题解 [CF803C] Maximal GCD

    题面 解析 一开始以为这题很难的... 其实只要设\(d\)为\(a\)的最大公因数, 即\(a[i]=s[i]*d\), 因为\(n=\sum_{i=1}^{n}a[i]=\sum_{i=1}^ns ...

  10. Base64编解码是什么?

    ㈠Base64是什么? ⑴Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法. ⑵Base64编码是从二进制到字符的过程, ...