怎么在vue中使用v-model-创新互联-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

怎么在vue中使用v-model-创新互联

怎么在vue中使用v-model？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

十年品牌的成都网站建设公司,上1000家企业网站设计经验.价格合理,可准确把握网页设计诉求.提供定制网站建设、购物商城网站建设、小程序制作、成都响应式网站建设公司等服务,我们设计的作品屡获殊荣,是您值得信赖的专业网站设计公司。

v-model本质上是一个语法糖。如下代码本质上是<input :value="test" @input="test = $event.target.value">，其中@input是对输入事件的一个监听:value="test"是将监听事件中的数据放入到input，下面代码是v-model的一个简单的例子。在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。可以在如下div中加入

获取input数据，然后去修改input中数据会发现

中数据随之改变。

1.v-model在input的下拉框、单选按钮、复选框中的应用

如下面代码，分别是v-model在input不同的组件中的应用，但是大体用法相同。注意：像下面代码中复选框这样需要接收多条数据的情况下，在data里面应该由数组与其对应二不是字符串。

这里有一个值绑定的问题，不管是下拉框或者单选按钮还是复选框，我们都可以在对应的标签内设置value。以下拉框为例，我们在

这里还有一个和vue无关的问题，比较简单，但是由于平时主要做后台java开发没太注意这个前端问题。以下面的单选按钮代码为例，标签内有一个for元素与input中的id值对应(两个值相同)，刚开始不太理解为什么这么写，这个对前端人员来说应该是一个很简单的问题。这样写的目的没有其它任何作用，只是label元素为鼠标改进了可用性，在点击label的时候也相当于点击了对应的input控件，点击label标签也可以触发input标签控件。例如单选按钮在加了for之后点击small也可以选择对应按钮，但是如果不加for是没有任何反应的。



  
    A
    B
    C
  
  Selected: {{ selected }}

small

big
Picked: {{ picked }}

选项一选项二选项三
Checked names: {{ checkedNames }}

2.v-model修饰符

v-model也可以和.lazy、.trim和.number这些修饰符一起使用。

.trim和.number的用法比较简单，这里就不做过多解释。.lazy相当于一个延迟加载的过程。在上面我们讲过相当于一个语法糖，而则相当将input的实时更新改为一个change事件，v-model.lazy只有当焦点移除input时才会触发事件。下图1位v-model效果，图2位v-model.lazy效果。

怎么在vue中使用v-model

下面在单独给大家介绍下vue中v-model使用

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

1. v-bind绑定一个value属性

2. v-on指令给当前元素绑定input事件

自定义组件使用v-model，应该有以下操作：

1. 接收一个value prop

2. 触发input事件，并传入新值

在原生表单元素中：

相当于

在自定义组件中

相当于

这个时候，inputValue接受的值就是input事件的回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还需要$emit去触发input的事件。

this.$emit('input', value)

关于怎么在vue中使用v-model问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。

网站栏目：怎么在vue中使用v-model-创新互联
地址分享：http://lswzjz.com/article/dghooi.html

新闻中心

其他资讯