如图所示
有三个字段要从弹出的输入框取值
点击字段会弹出上面的弹窗,输入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. c#如何使用MemoryStream和BinaryFormatter进行对象的序列化和返序列化

    1 下面是我写的一个序列化的类 public static class ObjSerialize { /// <summary> /// 将对象数组obj序列化,内存中的缓冲区的数据序列化 ...

  2. SSISDB7:当前正在运行的Package及其Executable

    PM问:“Vic,现在ETL Job跑到哪一个Package了,正在执行哪个Task?”,第一次遇到这个问题时,一下就懵逼了,只能硬着头皮说:“我看看”. 在做项目开发时,这个问题很常见,但是,被很多 ...

  3. JTree实现QQ好友列表

    最近学习了一下JTree的使用方法: 先来看一下树的实例: 构建一个树, DefaultMutableTreeNode root = new DefaultMutableTreeNode(" ...

  4. redis __详解 (转载自作者:孤独烟 出处: http://rjzheng.cnblogs.com/)

    https://www.cnblogs.com/rjzheng/p/9096228.html [原创]分布式之redis复习精讲 引言 为什么写这篇文章? 博主的<分布式之消息队列复习精讲> ...

  5. Python学习记录6-list、tuple、dict、set复习

    数据类型在一门语言中是非常重要的,所以选择再次学习一下加深记忆.本次主要参考了大神廖雪峰的官方网站,非常感谢大神,讲的很清晰,收获很大. 标准数据类型 Number(数字) String(字符串) L ...

  6. 学java编程软件开发,非计算机专业是否能学

    近几年互联网的发展越来越好,在国外,java程序员已经成为高薪以及稳定职业的代表,虽然国内的有些程序员很苦逼,但是那只是少数,按照国外的大方向来看,程序员还是一个很吃香的职业.根据编程语言的流行程度, ...

  7. Django学习:创建admin后台管理站点

    Django自带一个后台管理站点,方便我们管理数据.这个界面只给管理员使用,并不对大众开放. 创建管理员用户 py manage.py createsuperuser 如下图所示: 用户名不填的话,默 ...

  8. h5 特效

    地址:http://www.cnblogs.com/sun927/p/5842852.html 几个别人总结的css3炫酷效果,有需要直接拿来用即可,包括以下几个效果: 1.悬浮时放大 2.悬浮时转一 ...

  9. Sleep-Join方法理解

    package cn.mayday.test; public class JoinTest { public static void main(String[] args) { try { int c ...

  10. 《黑白团团队》第九次团队作业:Beta冲刺第二天

    项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 团队项目Github仓库地址链接. 第一天 日期:2019/6/24 1.1 ...