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',{ ...
随机推荐
- 安卓进阶之自定义View
目录 安卓进阶之自定义View 自定义View的工作流程和内容 工作流程 测量阶段和布局阶段的工作内容 View 和 ViewGroup 在测量阶段和布局阶段的区别 绘制阶段的工作内容 上手:实现继承 ...
- win10 增加一个新磁盘
1.右键我的电脑,选择管理 可以看到C盘的空间相比较大,拿出来250G的空间做成E盘 2.选择OS(C:),右键,压缩卷,请稍后,点击压缩 3.此刻会看到,有一块黑色区域就是新建的未分配空间,这时我们 ...
- 阿里十年架构师告诉你Spring Boot与Spring Cloud是什么关系
SpringBoot先于Spring Cloud问世.SpringBoot相当于脚手架,借助他可以快速搭建房子,它本身不具备任何功能属性,值是普通房间,没有其他任何功能. 什么是Spring Boot ...
- 地沟油jiance
与地沟油较劲九年(我和我的祖国) 任 飞 2019年06月13日05:00 来源:人民网-人民日报 分享到: 地沟油中含有多种有毒有害物质,但地沟油的检测却是一大难题.单靠眼睛谁也无法判断 ...
- 用VNC远程无线站
用VNC远程无线站 第一步: 远程一台我们可以vnc连接的linux电脑(IP1为实际IP地址) vim /etc/ssh/sshd_config 修改:69行为 X11Forwarding no 为 ...
- 如何通过字符串形式导包(importlib模块的使用)
1 模块简介 Python提供了importlib包作为标准库的一部分.目的就是提供Python中import语句的实现(以及__import__函数).另外,importlib允许程序员创建他们自定 ...
- Ubuntu打开系统监视器查看进程&资源等信息
Ubuntu打开系统监视器查看进程&资源等信息 类似于Windows的任务管理器,Ubuntu也提供了系统监视器供用户管理进程及查看系统占用资源等 打开方式,终端输入如下命令: gnome-s ...
- 【转载】SELENIUM2支持无界面操作(HTMLUNIT和PHANTOMJS)
SELENIUM2支持无界面操作(HTMLUNIT和PHANTOMJS) selenium2支持通过各种driver(FirfoxDriver,IternetExplorerDriver,OperaD ...
- mysql基础_操作数据库以及表
1.数据库的操作 create database 数据库名:#一般创建方式 create database 数据库名 show databases;#查看所有数据 drop database 数据库名 ...
- C# LINQ(10)
LINQ 查询 var query = from r in Formula1.GetChampions() where r.Country == "Brazil" orderby ...