v-mode详解以及具体的使用示例-高级用法

时间：2024-03-14 20:12:39

在高级用法中，v-model 指令可以用在以下几种情况下：

  • 自定义修饰符
  • 自定义事件
  • 组件上使用 v-model

自定义修饰符

在 v-model 指令中，可以使用修饰符来修改其默认行为。例如：

  • .lazy：在输入框失去焦点或用户按下回车键时，才会更新数据。
  • .number：将用户输入的值自动转换为数字类型。
  • .trim：自动去除用户输入的首尾空格。

例如：

<div id="app">
  <p>Message is: {{ message }}</p>
  <input v-model.lazy="message">
  <input v-model.number="age">
  <input v-model.trim="name">
</div>

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!',
      age: 0,
      name: ''
    };
  }
});

app.mount('#app');

在这个例子中，我们使用了 .lazy、.number 和 .trim 三个修饰符，分别修改了 v-model 指令的默认行为。

自定义事件

在某些情况下，我们需要在数据更新时触发自定义事件，可以使用 v-model 指令的自定义事件功能。例如：

<div id="app">
  <p>Message is: {{ message }}</p>
  <input v-model="message" @input="onInput">
</div>

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    onInput(event) {
      console.log(event.target.value);
    }
  }
});

app.mount('#app');

在这个例子中，我们在 <input> 元素上同时使用了 v-model 指令和 @input 事件监听器。当用户在输入框中输入文本时，message 的值将会实时更新，同时也会触发 onInput 方法。

组件上使用 v-model

在自定义组件中，我们可以使用 v-model 指令来实现与父组件的双向数据绑定。例如：

<div id="app">
  <p>Message is: {{ message }}</p>
  <my-input v-model="message"></my-input>
</div>

const MyInput = {
  props: ['modelValue'],
  template: `
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
  `
};

const app = Vue.createApp({
  components: {
    MyInput
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

app.mount('#app');

在这个例子中，我们定义了一个名为 MyInput 的自定义组件，并在其中使用了 v-model 指令。在组件中，我们使用了 props 和 $emit 来实现与父组件的双向数据绑定。当用户在输入框中输入文本时，message 的值将会实时更新，反之亦然。

相关文章