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',{ ...
随机推荐
- TimeUtil 工具类
/** * TODO * * @auther xh * @date 6/11/19 3:32 PM */ public class TimeUtil { public static final Str ...
- Flutter 38: 图解 Flutter 基本动画 (二)
小菜前两天学习了以下 Animation 的基本动画,接下来小菜学习以下稍微进阶版的 Animation 动画. 复合动画 小菜前两天学习的主要是基本的单一动画,当然多个动画效果集一身也是毫无问题的, ...
- python实现IP地址转换为32位二进制
python实现IP地址转换为32位二进制 #!/usr/bin/env python # -*- coding:utf-8 -*- class IpAddrConverter(object): de ...
- Linux常用配置选项
- pip安装超时解决方案
1 安装的后面 用-i接一些国内的镜像,下面这个是清华的,亲测比较快 pip install apache-airflow -i https://pypi.tuna.tsinghua.edu.cn/s ...
- nodejs建站+github page 建站问题总结
本文介绍 昨天吃晚饭的时候,在B站偶然看到一个关于搭建自己博客的视频,过程讲的很详细,于是就有了自己想尝试一下的冲动,所以,在晚上的时候,尝试了下,但是,过程并没有视频中说的那么顺利,看了网上很多帖子 ...
- SQLite3学习笔记(2)
SQLite 创建表 SQLite 的CREATE TABLE 语句用于在任何指定的数据库创建一个新表. 创建新表,涉及到命名表.定义列及每一行的数据类型. CREATE TABLE 的基本语法如 ...
- 4.caffe资源汇总(更新中)
学习需要更新,网上有一些非常不错博客. 感谢这些博主,他们都很认真. 00.tornadomeet 0.denny的学习专栏 1.xizero00 2.lingerlanlan 3.iamzhangz ...
- Codeforces 920E-Connected Components? (set,补图,连通块)
Connected Components? CodeForces - 920E You are given an undirected graph consisting of n vertices a ...
- VSS使用技巧
理由很简单:迁出锁定!之所以强调这个,是因为这方面吃过的亏太多,我举几个例子:1.比如两个程序员增加了同一个功能,但是实现方法不同,比如甲:func1,乙 func2,两者代码也不一样第二个人在迁入代 ...