v-model实现数据和页面双向绑定的案例

当使用 `v-model` 指令时，可以很方便地实现数据和页面之间的双向绑定。以下是一个简单的案例：

<template>
  <div>
    <input type="text" v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

在上面的例子中，我们使用了 `v-model="message"` 将输入框的值和 `message` 数据属性进行双向绑定。当输入框的值发生变化时，`message` 数据属性也会跟着更新。反过来，当 `message` 数据属性的值改变时，输入框的值也会自动更新。

这样，无论是在输入框中输入内容还是在其他地方修改 `message` 的值，页面上的显示都会实时更新，实现了数据和页面的双向绑定。

相关问题

v-model实现双向数据绑定的案例

当使用 `v-model` 进行双向数据绑定时，可以通过在组件中使用 `value` 属性和 `input` 事件来实现数据的传递和同步。下面是一个使用 `v-model` 实现双向数据绑定的案例：

<template>
  <div>
    <p>父组件：{{ parentValue }}</p>
    <ChildComponent v-model="parentValue"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: 'Hello'
    }
  }
}
</script>

在上述示例中，父组件使用 `v-model` 绑定了 `parentValue` 数据，并将其作为 `value` 属性传递给子组件。子组件接收到 `value` 属性后，使用 `v-model` 将其绑定到一个输入框上，并监听输入框的 `input` 事件，在事件处理函数中通过 `$emit` 触发 `input` 事件，将输入框的值传递给父组件。

子组件的代码如下：

<template>
  <div>
    <p>子组件：{{ inputValue }}</p>
    <input v-model="inputValue" type="text">
  </div>
</template>

<script>
export default {
  props: {
    value: String
  },
  data() {
    return {
      inputValue: this.value
    }
  },
  watch: {
    inputValue(newVal) {
      this.$emit('input', newVal); // 触发 input 事件，更新父组件的数据
    }
  }
}
</script>

在子组件中，我们使用 `props` 接收父组件传递的 `value` 属性，并将其赋值给子组件的 `inputValue` 数据。然后将 `inputValue` 绑定到一个输入框上，当输入框的值发生变化时，通过 `watch` 监听 `inputValue` 的变化，然后通过 `$emit` 触发 `input` 事件，将新的值传递给父组件。

这样，父子组件之间就可以通过 `v-model` 实现双向数据绑定了。在父组件中，`parentValue` 的值会随着子组件输入框的改变而更新；在子组件中，输入框的值会随着父组件的 `parentValue` 值改变而更新。

vue.js3中v-model和v-for动态表单案例代码

在Vue.js 3中，`v-model` 和 `v-for` 配合通常用于创建动态表单，比如一个可以添加和删除行的表格。这里有一个简单的例子，假设我们有个数据数组，每个元素代表表格的一行：

<template>
  <div id="dynamic-form">
    <button @click="addRow">Add Row</button>

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <!-- 添加按钮 -->
          <th>Action</th>
        </tr>
      </thead>
      <tbody v-for="(item, index) in items" :key="index">
        <tr>
          <td><input type="text" v-model="item.name"></td>
          <td><input type="email" v-model="item.email"></td>
          <!-- 删除按钮 -->
          <td>
            <button @click="removeItem(index)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [{ name: '', email: '' }],
    };
  },
  methods: {
    addRow() {
      this.items.push({ name: '', email: '' });
    },
    removeItem(index) {
      this.items.splice(index, 1);
    },
  },
};
</script>

在这个示例中，`v-model` 实现了双向数据绑定，用户输入的数据会实时反映到数据模型上。`v-for` 则迭代渲染每一行，`addItem` 方法用于追加新行，`removeItem` 方法则删除指定索引的行。