华山资源网

Vue ​v-model相关知识总结
网络编程 2024/11/15 佚名
3 1

"htmlcode"> 

<template>
 <div>
  <input 
   type='text'
   v-model='value'
  />
  <p> Value: {{ value }} </p>
 </div>
</template>

<script>
export default {
 data() {
  return {
   value: 'Hello World' 
  }
 }
}
</script>

当我们在文本输入中输入时，我们会看到我们的data属性发生了变化。

v-model和v-bind的区别"htmlcode"> 
<input 
 type='text'
 v-model.trim.lazy='value'
/>

.lazy

默认情况下，v-model在每个输入事件上与Vue实例(数据属性)的状态同步。这包括得到，失去焦点等等。

lazy修饰符修改了我们的v-model，所以它只在更改事件之后同步。

这减少了v-model试图与Vue实例同步的次数——在某些情况下，还可以提高性能。

.number

通常，我们的输入将自动将输入转为字符串—即使我们将输入是数字。

确保将值作为数字处理的一种方法是使用. number修饰符。

根据Vue文档，如果输入发生变化，并且parseFloat()无法解析新值，那么将返回输入的最后一个有效值。

<input 
 type='number'
 v-model.number='value'
/>

.trim

与大多数编程语言中的trim方法类似，.trim修饰符在返回值之前删除开头或结尾的空白。

在自定义组件中使用v-model

好了，现在我们已经了解了form/input内部的v-model的基本知识，让我们看看v-model的一个有趣用法——在组件之间创建双向数据绑定。

在Vue中，数据绑定有两个主要步骤:

从父节点传递数据

从子组件发出事件以更新父组件

在自定义组件上使用v-model可以让我们传递一个prop，用一个指令来处理一个事件。

<custom-text-input v-model="value" />
<!-- IS THE SAME AS -->
<custom-text-input 
  :modelValue="value"
  @update:modelValue="value = $event"
/>

好吧，这到底是什么意思"htmlcode"> 

<custom-text-input v-model:name="value" />

注意:当我们使用自定义模型名称时，所发出方法的名称将被更新:name

下面是来自Vue文档的一张图来总结它。

Vue ​v-model相关知识总结

使用自定义组件中的v-model

我们已经设置好了父组件，所以让我们从子组件访问它。

在CustomTextInput.vue中，我们必须做两件事:

  • 接受我们的v-model值作为prop
  • 当我们的输入发生变化时，触发一个更新事件

好的——让我们首先在脚本中声明它是prop。

export default {
 props: {
  modelValue: String,
 }
}

接下来，让我们创建我们的模板，将值设置为modelValue prop，只要有输入事件，我们就通过update:modelValue发出新值。

<template>
 <div>
  <label> First Name </label>
  <input 
   type='text'
   placeholder='Input'
   :value='modelValue'
   @input='$emit("update:modelValue", $event.target.value)'
  />
 </div>
</template>

使用v-model

好吧!

我们已经介绍了一个使用v-model在两个组件之间绑定数据的基本示例。

让我们看一些使用v-model指令的更高级的方法。

对一个组件多次使用v-model

v-model并不局限于每个组件只能使用一次。

要多次使用v-model，我们只需要确保为每个prop唯一命名，并在子组件中正确访问它。

让我们在lastName中添加第二个v-model。

在我们的父组件中：

<template>
 <div>
  <custom-text-input 
   v-model='value' 
   v-model:lastName='lastName'
  />
  <p> Value: {{ value }} </p>
  <p> Last Name: {{ lastName }} </p>
 </div>
</template>

<script>
import CustomTextInput from './CustomTextInput.vue'

export default {
 components: {
  CustomTextInput,
 },
 data() {
  return {
   value: 'Matt',
   lastName: 'Maribojoc'
  }
 }
}
</script>

然后，在子组件内部：

<template>
 <div>
  <label> First Name </label>
  <input 
   type='text'
   :value='modelValue'
   placeholder='Input'
   @input='$emit("update:modelValue", $event.target.value)'
  />
  <label> Last Name </label>
  <input 
   type='text'
   :value='lastName'
   placeholder='Input'
   @input='$emit("update:lastName", $event.target.value)'
  />
 </div>
</template>

<script>
export default {
 props: {
  lastName: String,
  modelValue: String,
 }
}
</script>

V-model的自定义修饰符

正如我们所讨论的，Vue中内置了一些修饰符。但总有一天，我们会想要添加我们自己的。

假设我们想要创建一个修饰符来删除输入中的所有空格。我们称之为无空格。

<custom-text-input 
 v-model.no-whitespace='value' 
 v-model:lastName='lastName'
/>

在我们的输入组件中，我们可以使用prop来捕获修饰符。自定义修饰符的名称是nameModifiers。

props: {
 lastName: String,
 modelValue: String,
 modelModifiers: {
  default: () => ({})
 }
}

好的，我们要做的第一件事是改变@input处理器来使用一个自定义方法。我们可以称它为emitValue，它将接受正在编辑的属性和事件对象的名称。

<label> First Name </label>
<input 
   type='text'
   :value='modelValue'
   placeholder='Input'
   @input='emitValue("modelValue", $event)'
/>

在emitValue方法中，在调用$emit之前，我们要检查修饰符。如果no-whitespace修饰符为true，则可以在将其发送给父对象之前修改该值。

emitValue(propName, evt) {
 let val = evt.target.value
 if (this.modelModifiers['no-whitespace']) {
  val = val.replace(/\s/g, '')
 }
 this.$emit(`update:${propName}`, val)
}

结论

希望你知道了一些有关v-model的新知识。

在它的基本用例(如表单和输入数据)中，v-model是一个非常简单的概念。然而，当我们开始创建自定义组件并处理更复杂的数据时，我们可以真正了解v-model。

以上就是Vue ​v-model相关知识总结的详细内容，更多关于Vue ​v-model的资料请关注其它相关文章！

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com