Vue input控件通过value绑定动态属性及修饰符的方法

对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中时，`selected` 为字符串 "abc" -->
<select v-model="selected">
 <option value="abc">ABC</option>
</select>

但是有时我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

举个最容易认知的例子

<input type="radio" v-model="pick" v-bind:value="a">
//当只有v-model的情况下，我们绑定了VUE实例中的pick这个数据，而这数据往往都是字符串或者是逻辑值，而如今通过v-bind绑定value，意味着，value是一个可变的数据 a,而不是字符串'a'，而v-model在这个控件选定后的值就是指向value,而用v-bind绑定后，指向的值又是一个动态属性，所以此时就可以通过a这个动态属性来更改v-model绑定的值,其他的控件也是如此，比如select等
// 当选中时
vm.pick === vm.a

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

//测试是在失去焦点的时候才更新，而不是实时更新

<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">
{{typeof age}}//如果输入的是字符串则是string,如果是数字字符串则转换成number

这通常很有用，因为在 type=”number” 时 HTML 中输入的值也总是会返回字符串类型。

.trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">

以上所述是小编给大家介绍的Vue input控件通过value绑定动态属性及修饰符的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解.vue文件中监听input输入事件（oninput）

    详解.vue文件中监听input输入事件（oninput）

    .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput. oninput 事件在用户输入时触发,菜鸟教程中的用法是: 但是在.vue中这样写是没有作用的: <input type="text" id="cardsNum2" value="1" @oninput =&quo

  • Vue通过input筛选数据

    本文实例为大家分享了Vue通过input筛选数据的具体代码,供大家参考,具体内容如下 <div id="app"> <input v-model='search' /> <ul> <li v-for="item in items"> <label>价格</label><span v-html="item.name"></span> <label&

  • vue.js中v-on:textInput无法执行事件问题的解决过程

    vue.js中v-on:textInput无法执行事件问题的解决过程

    前言 最近在学习vue.js框架,学习过程中遇到一些问题,所以记下其中遇到问题的解决过程,避免以后再遇到同样的问题,分享出来也方便遇到这个问题的朋友参考,下面话不多说了,来一起看看详细的介绍: 先来看这段示例代码 <div id="wrap"> <input type="text" v-on:textInput="fn"> </div> <script type="text/javascript

  • Vue中封装input组件的实例详解

    Vue中封装input组件的实例详解

    Vue中封装input组件 最近有点忙不过来 脱了很久,没有更新 抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数 我的项目中的UI图是这样的 代码如下 子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>

  • vue2.0结合Element实现select动态控制input禁用实例

    vue2.0结合Element实现select动态控制input禁用实例

    今天有一个盆友问小颖,怎么实现用select动态控制input禁用,也就是说,input默认是可编辑的,但是每当我选一次select,input就会变成禁用,虽然小颖不知道她为什么这样做,因为小颖觉得为什么不直接把input设置成禁用的而要用动态的,选一次select禁用一次input,也就是说,input只有在select是没有点击过的时候是可编辑的,但凡我改变一次select的值,input就要被设置成禁用,其实没有必要,因为第一次设置成禁用后面已经不能再改变input的值了,不过当时小颖也

  • vue通过watch对input做字数限定的方法

    之前写了关于vue通过watch对input做字数限定的方法,最近需要回顾,就顺便发到随笔上了 <div id="app"> <input type="text" v-model="items.text" ref="count"/> <div v-html="number"></div> /div> new Vue({ el: '#app', data:

  • vue.js 1.x与2.0中js实时监听input值的变化

    vue.js 1.x与2.0中js实时监听input值的变化

    一.vuejs 2.0中js实时监听input 在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用.这意味着 v-el:my-element 将写成这样: ref="myElement" , v-ref:my-component 变成了这样: ref="myComponent" .绑定在一般元素上时,ref 指DOM元素,绑定在组件上时,ref 为一组件实例. 因为 v-ref 不再是一个指令

  • vue获取input输入值的问题解决办法

    vue获取input输入值的问题解决办法 v-for里有多行input输入框,vue怎么获取某行的输入的值,随便写了点代码,意思就是后台返回了多行的list集合,页面显示多行输入框,当修改某行的值时进行校验,输入错误友好提示下,后边加个清空按钮,点击清空当前行数据,最开始的想法是,用v-bind:value绑定值,这样就出现一种情况,页面输入的值无法获取到,v-bind不会修改原始list里的值,而且ref也不能动态绑定,ref只能全部获取,this.$refs.itemPriceRef[],这

  • Vue input控件通过value绑定动态属性及修饰符的方法

    对于单选按钮,勾选框及选择列表选项, v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值): <!-- 当选中时,`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="check

  • Vue商品控件与购物车联动效果的实例代码

    本篇我们将构建商品控件与购物车联动. 商品控件 商品控件的结构编写 在商品组件的<template>标签内完成项目结构,以及数据,事件的绑定,与判断逻辑的书写. <template> <div class="goods"> <div class="menu-wrapper" ref="menuScroll"> <ul> <!--专场--> <li class="

  • Bootstrap实现input控件失去焦点时验证

    事实上,这是对应的"剪切"下来,然后"粘贴"到你的控件,请参见下面的代码的位置,所谓的透明背景图片: CClientDC CLDC(的getParent()); 的CRect矩形; 的CRect rect1; GetClientRect(RECT); GetWindowRect(rect1); 的getParent() - > ScreenToClient(rect1);如果 (m_dcBk.m_hDC == NULL){ m_dcBk.CreateCompa

  • JS获取页面input控件中所有text控件并追加样式属性

    如题,将使用jquery来在页面加载时获取页面input控件中所有text控件并添加样式. 以前写过的页面上所使用的text控件width属性太小需要改动,改动牵扯页面上所有text的属性,改动每个控件的width感觉会很麻烦,所以就想通过在页面加载的时候将要改动的text找到并添加属性. 首先先写了一个css样式: 复制代码 代码如下: .wid { width:205px; } 在页面加载中所写的代码如下: $("input[type=text]").addClass("

  • vue树形控件tree的使用方法

    vue树形控件tree的使用方法

    本文实例为大家分享了vue树形控件tree使用的具体代码,供大家参考,具体内容如下 <template>   <div class="hello tree-container">     <el-tree       :data="data"       show-checkbox       node-key="id"       class="tree"       :allow-drop=&

  • 详解BootStrap中Affix控件的使用及保持布局的美观的方法

    Affix是BootStrap中的一个很有用的控件,他能够监视浏览器的滚动条的位置并让你的导航始终都在页面的可视区域.一开始的时候,导航在页面中是普通的流式布局,占有文档中固定的位置,当页面滚动的时候,导航就自动变成了固定布局(fixed),始终处于用户的视区,下面来说说他的用法.首先来看看他的实现原理.它是通过实时修改页面元素的class属性来实现的 开始的时候应用affix的元素的class中会自动添加affxi-top属性 当滚动条滚动以至于导航快要到页面顶部的时候这时候在元素的class

  • C#用ComboBox控件实现省与市的联动效果的方法

    C#用ComboBox控件实现省与市的联动效果的方法

    本文实例讲述了C#用ComboBox控件实现省与市的联动效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: using System;  using System.Collections.Generic;  using System.ComponentModel;  using System.Data;  using System.Drawing;  using System.Linq;  using System.Text;  using System.Windows.

  • Vue中v-on的基础用法、参数传递和修饰符的示例详解

    一.v-on的基本用法 使用v-on:click给button绑定监听事件以及回调函数,@是v-on:的缩写,也就是简写也可以使用@click.方法一般是需要写方法名加上(),在@click中可以省掉,如上述的<button @click="increment">加</button>. 以简单的计数器为例 <body> <div id="app"> <h2>{{count}}</h2> <

  • Vue中子组件向父组件传值以及.sync修饰符详析

    目录 Vue中 常见的组件通信方式可分为三类 1. 之前的写法 2. .sync 修饰符 总结 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue中 provide.inject 详解及使用 Vue中 常见的组件通信方式可分为三类 父子通信 父向子传递数据是通过 props,子向父是通过 events($emit):通过父链 / 子链也可以通信($p

  • 亲自动手实现vue日历控件

    之前项目中有用到日历控件,当时由于时间问题,是在网上找到一个demo,然后二次开发的,从那时就想着自己写一个日历控件.这篇文章说明日历数据的处理,去除月份天数判断以及是否闰年判断. 设计(以最常用的按月份的日历) 日历其实大家都很熟悉,一切的设计都是从功能出发,这是根本.日历的功能分为两大块. 日历头部:当前年份/月份. 日历主体:当前月份的具体的日期信息. 日历主体的行数:现在我们看到的日历基本上为6行,因为一个月最多为31天,假设当前月的第一天为上一月最后一周的最后一天.如果是五行数据的话则

随机推荐