06 使用v-model实现双向数据绑定

概述

Vue achieves two-way data binding by creating a dedicated directive that watches a data property within your Vue component. The v-model directive triggers data updates when the target data property is modified on the UI.

Vue 通过创建一个专用指令来观察 Vue 组件中的数据属性,从而实现双向数据绑定。当用户界面上的目标数据属性被修改时,v-model 指令就会触发数据更新。

This directive is usually useful for HTML form elements that need to both display the data and modify it reactively – for example, input, textarea, radio buttons, and so on.

该指令通常适用于既需要显示数据又需要对数据进行反应式修改的 HTML 表单元素,例如输入、文本区域、单选按钮等。

We can enable two-way binding by adding the v-model directive to the target element and binding it to our desired data props:

我们可以在目标元素中添加 v-model 指令,并将其绑定到所需的数据道具,从而启用双向绑定:



In the next exercise, we are going to build a component using Vue’s twoway data binding and experiment with what it means to bind data in two ways.

在下一个练习中,我们将使用 Vue 的双向数据绑定构建一个组件,并尝试以两种方式绑定数据的含义。

练习:双向数据绑定

The context for this type of data model is usually forms or wherever you expect both input and output data. By the end of the exercise, we should be able to utilize the v-model attribute in the context of a form.

这类数据模型的上下文通常是表单或任何需要输入和输出数据的地方。在练习结束时,我们应该能够在表单中使用 v-model 属性。

Create a new Vue component file named Exercise1-04.vue in the src/components directory.

在 src/components 目录中新建一个名为 Exercise1-04.vue 的 Vue 组件文件。

在App.vue中引入该组件并渲染:



Inside Exercise1-04.vue, start by composing an HTML label and bind an input element to the name data prop using v-model inside the template area:

在 Exercise1-04.vue 中,首先创建一个 HTML 标签,然后在模板区域内使用 v-model 将输入元素与名称数据道具绑定:

Complete the binding of the text input by returning a reactive data prop called name in the

Next, compose a label and selectable HTML select tied to the language data prop using v-model inside of the template area:

接下来,在模板区域内使用 v 模型编写与语言数据道具绑定的标签和可选 HTML 选项:

<template>
  <div class="form">
    <label>
      Name
      <input type="text" v-model="name"/>
    label>
    <label>
      Preferred JavaScript style
      <select name="language" v-model="language">
        <option value="Javascript">JavaScript
        option>
        <option value="TypeScript">TypeScript
        option>
        <option value="CoffeeScript">CoffeeScript
        option>
        <option value="Dart">Dartoption>
      select>
    label>
  div>
template>

Finish binding the select input by returning a reactive data prop called language in the

你可能感兴趣的:(使用Vue3进行前端开发,vue.js,javascript,前端)