遇到如下错误:

v-model does not support dynamic input types

解决方法:

vue 2.5.0以上,支持动态绑定

<input :type="type" :name="name" :id="name" v-model="inputVal">

vue 2.5.0以下,可以使用v-if来做

<input v-if="type == 'text'" type="text" :name="name" :id="name" v-model="inputVal">
<input v-if="type == 'number'" type="number" :name="name" :id="name" v-model="inputVal">

出处:https://stackoverflow.com/questions/44461188/vue2-v-model-does-not-support-dynamic-input-types

vue动态(type可变)input绑定的更多相关文章

  1. vue中多个input绑定enter按键事件

    默认再每个input上加 keyup.enter 是可以绑定事件的 可是多个input一起绑定同一个事件就比较麻烦 所以就在vue dom里面遍历查找并绑定事件 let handleEnter = ( ...

  2. VUE动态(自动)Loading【绑定到URL】,同页面多个Loading互不冲突

    需求来源:当使用React时,使用 umi loading 很方便,页面对http请求发生改变时,也会自动改变loading的相关状态(true/false) 对VUE插件进行找寻,发现没找到合适内容 ...

  3. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  4. vue 表单输入与绑定 v-model

    vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...

  5. vue中v-model 数据双向绑定

    表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...

  6. jQuery对 动态添加 的元素 绑定事件(on()的用法)

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

  7. vue.js中,input和textarea上的v-model指令到底做了什么?

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  8. 从Object.definedProperty中看vue的双向数据的绑定

    前言 Object.defineProperty是ES5中的方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.vue.js正式利用这种方法实现数据的双向绑定,以 ...

  9. vue 如何在循环中绑定v-model

    vue 如何在循环中绑定v-model 我现在有这么一个需求,页面上有多项输入框,但是具体有多少项,我也不知道,它是通过"新增一项"按钮点击事件,点击一下,就新增一项:如下图这个样 ...

随机推荐

  1. Java的“Goto”与标签

    goto在Java中是一个保留字,但在语言中并没有用到它:Java没有goto.但是,Java也能完成一些类似于跳转的操作,主要是依靠:标签. 为什么要使用标签 在迭代语句中,我们可以使用break和 ...

  2. 没有CTO的Netflix有哪些值得我们学习的工程文化?

    作者介绍: 杨波,拍拍贷基础框架研发总监.具有超过 10 年的互联网分布式系统研发和架构经验,曾先后就职于:eBay 中国研发中心(eBay CDC),任资深研发工程师,参与亿贝开放 API 平台研发 ...

  3. spring-bean(全生命周期)

    作用:在初始化和销毁bean时候,做一些处理工作是调用生命周期方法 格式: <bean id=”该生命周期的名称” class=”提供方法的类的全路径” init-methood=”init” ...

  4. laravel通过make auth实现手机号登录

    首先按照Laravel的教程,安装认证系统. php artisan make:auth php artisan migrate laravel已经安装完成认证系统,默认注册和登录都是用邮箱. 如果想 ...

  5. 一件安装lnmp

    wget -c http://soft.vpser.net/lnmp/lnmp1.2-full.tar.gz && tar zxf lnmp1.2-full.tar.gz && ...

  6. JavaSE 第二次学习随笔(String的坑 + ==)

    String 类是一个final类, 其内部是使用的 private final char value[]; 来存储内容, 其既可以当作一个基本类型来使用也可以当作一个类来使用;final 类(Str ...

  7. C++高级 STL——模板函数、模板类

    1.模板函数 // 定义 template <class T> Max(T &t1, T &t2) { return ((t1 > t2) ? t1 : t2); } ...

  8. Matplotlib 图表的基本参数设置

    1.图名,图例,轴标签,轴边界,轴刻度,轴刻度标签 # 图名,图例,轴标签,轴边界,轴刻度,轴刻度标签等 df = pd.DataFrame(np.random.rand(10,2),columns= ...

  9. 猜数字问题 python

    猜数字问题,要求如下: ① 随机生成一个整数 ② 猜一个数字并输入 ③ 判断是大是小,直到猜正确 ④ 判断时间提示:需要用time模块.random模块该题目不需要创建函数 import random ...

  10. spark streaming的应用

    今天我们讲spark streaming的应用,这个是实时处理的,类似于Storm以及Flink相关的知识点, 说来也巧,今天的自己也去听了关于Flink的相关的讲座,可惜自己没有听得特别清楚,好像是 ...