如图所示
有三个字段要从弹出的输入框取值
点击字段会弹出上面的弹窗,输入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++ DLL导出的两种方式和链接的两种方式

    第一种 导出方式 extern "C" _declspec(dllexport) int Plus(int x, int y); extern "C" _dec ...

  2. Makefile中代码写在同一行和分开几行写有什么区别?

    在Makefile中,写在同一行的代码就相当于是在Linux中的同一行命令行写的代码一样,是一次性执行的:如程序中如下编写Makefile代码(请注意,两个命令之间应该使用分号“:”来进行分隔): a ...

  3. iview 如何在表格中给操作图标添加Tooltip文字提示?

    项目需要用到的iview 表格中操作项目有各种各样的图标,而各种各样的图标代表不同的操作,面对新用户可能很懵,那如何给这些图标添加Tooltip文字提示? 废话不多讲,直接看代码: <templ ...

  4. config.json读取和存储

    json格式的配置文件的读取和存储 public class ConfigHelper { public static T GetConfig<T>(string path) { if ( ...

  5. 多机部署lnmp-1

    第一台部署Nginx [root@lnmp ~]# cat /etc/yum.repos.d/nginx.repo[nginx]name=nginx repobaseurl=http://nginx. ...

  6. 2.Locust 跑起来试试

    代码 from locust import HttpLocust, TaskSet, task class UserBehavior(TaskSet): @task def baidu(self): ...

  7. unity里framebuffer fetch相关问题

    https://docs.unity3d.com/Manual/SL-PlatformDifferences.html 开了framebuffer fetch 如果你再在里面sample 那张rt ( ...

  8. (二)线程Thread中的方法详解

    1.start() start()方法的作用讲得直白点就是通知"线程规划器",此线程可以运行了,正在等待CPU调用线程对象得run()方法,产生一个异步执行的效果.通过start( ...

  9. python一些方便excel行操作的函数(一)

    import collections class headhandler(): def __init__(self,mylist): self.mystorage={} self.mylist = m ...

  10. jQuery 查找父节点 parents()与closest()

    parents()由内向外,直到最高的父节点停止查找,返回的父节点是多个 closest()由内向外查找,当找到符合规则的一个,则不再查找,返回的是0或1个