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',{ ...
随机推荐
- 微信小程序带参数生成二维码
wx.request({ url: 'https://api.weixin.qq.com/cgi-bin/token', header: { 'content-type': 'application/ ...
- PHP转码函数mb_convert_encoding() 和iconv()
注意:函数mb_convert_encoding的执行效率比iconv差,且需开启php的mbstring扩展. 一般情况下使用iconv,但此函数在碰到无法转码字符会丢弃,此种情况下可以用mb_co ...
- 常见python面试题-手写代码系列
1.如何反向迭代一个序列 #如果是一个list,最快的方法使用reversetempList = [1,2,3,4]tempList.reverse()for x in tempList: pr ...
- 针对nginx应用场景的配置 知识整理
本文为转载,原文链接 前言 原本想写整理一篇针对nginx应用场景的相应配置,但发现已经有人整理了,而且写得非常不错,特意转过来 概论 Nginx 是一款面向性能设计的 HTTP 服务器,能反向代理 ...
- 【3】Git命令
个人推荐的Git知识学习网站:https://git-scm.com . git常用操作图 init -> add -> commit -> remote -> push 初始 ...
- 04_ Flume采集文件到HDFS案例
采集需求:比如业务系统使用log4j生成的日志,日志内容不断增加,需要把追加到日志文件中的数据实时采集到hdfs 根据需求,首先定义以下3大要素 采集源,即source——监控文件内容更新 : ex ...
- rdb和aof二种持久化方式对比(Redis)
我们已经知道对于一个企业级的redis架构来说,持久化是不可减少的 企业级redis集群架构:海量数据.高并发.高可用 持久化主要是做灾难恢复,数据恢复,也可以归类到高可用的一个环节里面去 比如你re ...
- 利用 sendBeacon 发送统计信息
我们经常会在网站追踪用户的信息,比如记录用户的停留时间. window.addEventListener("unload", () => { // sendHTTP }); ...
- Linux下安装LoaderRunner LoaderGenerator
Linux负载机上安装LR的理由: 1.windows系统,基本上每个vuser会消耗2-5M的内存,单机300-500或者更多的虚拟用户时,CPU占用率已经较高,此时整个测试环境的测试系统的瓶颈实际 ...
- Python 获得程序 exe 的版本号
Python 获得程序 exe 的版本号 python中需要安装 pywin32 包 # based on http://stackoverflow.com/questions/580924/pyth ...