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',{ ...
随机推荐
- MongoDB divide 使用之mongotempalte divide
需求:求一组数的两个字段计算结果的平均值 如有一组这样的数: 列名1 列名2 列名3 第一组数 a 2 5 第二组数 b 4 8 按照列名1分组 ...
- DX使用随记--GroupControl
1. 创建按钮: (1)添加引用:Imports DevExpress.XtraEditors.ButtonsPanelControl (2)添加按钮语句:GroupControl1.CustomHe ...
- 03.Zabbix应用服务监控
一.Zabbix监控Nginx 1.1 实验环境 服务器系统 角色 IP CentOS 7.4 x86_64 Zabbix-Server 192.168.90.10 CentOS 7.4 x86_64 ...
- 不重启linuxVMWare虚拟机添加虚拟光驱、硬盘
方法/步骤1: VMware找到要添加虚拟光驱位置,先右击点击设置,如图所示: 步骤2: 出现此界面之后点击添加: 步骤3: 直接点击下一步,如下图所示: 点击完成,天机硬盘就完毕了. 磁盘添加完成, ...
- asp.net 设计音乐网站
第一步 收集资料 http://www.logoko.com.cn/ --设计logo网站 设计音乐文档 https://wenku.baidu.com/view/3d957617f18583 ...
- HTML5 离线缓存manifest
1.简介W3C官方对manifest的介绍是HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在 ...
- 大数据量时Mysql的优化
(转自网络) 如今随着互联网的发展,数据的量级也是撑指数的增长,从GB到TB到PB.对数据的各种操作也是愈加的困难,传统的关系性数据库已经无法满足快速查询与插入数据的需求.这个时候NoSQL的出现暂时 ...
- Thinkphp3.2.3关于开启DEBUG正常,关闭DEBUG就报错模版无法找到,页面错误!请稍后再试~
这是Thinkphp3.2.3的一个坑- 具体原因也没搞清楚,测试环境都是好的,线上就出问题,是因为线上debug是关闭的 具体原委特此记录: 现象:(打开DEBUG就正常了,所以界面看不到具体报错滴 ...
- Python&Selenium智能等待方法封装
摘要:本篇博文用几行代码展示Python和Selenium做自动化测试时常见的显示等待和封装 # 用于实现智能等待页面元素的出现 # encoding = utf-8 ""&quo ...
- 我对line-height及vertical-align的一点理解
张鑫旭老师在文章<我对CSS vertical-align的一些理解与认识(一)>中提到: vertical-align:middle属性的表现与否,仅仅与其父标签有关,至于我们通常看到的 ...