Vue: explicación detallada del enlace de entrada del formulario

Explicación detallada del enlace de entrada del formulario Vue.js

En el desarrollo web, los formularios son una de las formas importantes para que los usuarios interactúen con las aplicaciones. Vue.js proporciona un potente mecanismo de enlace de entrada de formulario, lo que lo hace más conciso y eficiente al procesar la entrada del usuario. Este blog explorará en profundidad los diversos usos del enlace de entrada de formulario en Vue.js, incluido el ingreso de texto, texto de varias líneas, casillas de verificación, botones de opción, cuadros de selección desplegables, cuadros de selección múltiple y el uso de modificadores.

Entrada de texto

Primero, veamos el enlace del cuadro de entrada de texto. A través v-modelde la directiva, podemos lograr fácilmente la vinculación bidireccional del cuadro de entrada de texto y los datos. Aquí hay un ejemplo simple:

<label for="textInput">输入文本：</label>
<input id="textInput" v-model="text" placeholder="输入文本" />
<p>输入的文本是: {
   
   { text }}</p>

En el código anterior, el valor del cuadro de entrada de texto está vinculado v-modela los datos en la instancia de Vue . textCuando el usuario ingresa contenido en el cuadro de entrada, textel valor de se actualizará automáticamente y el texto que se muestra en la página también se actualizará.

Entrada de texto de varias líneas

Para la entrada de texto de varias líneas, utilizamos <textarea>el elemento y también lo utilizamos v-modelpara el enlace de datos. He aquí un ejemplo:

<label for="textArea">多行文本：</label>
<textarea id="textArea" v-model="message" placeholder="输入多行文本"></textarea>
<p>多行文本是:</p>
<pre>{
   
   { message }}</pre>

<textarea>El contenido interno messageestá vinculado bidireccionalmente a los datos en la instancia de Vue. Cuando el usuario ingresa contenido en el cuadro de entrada de texto de varias líneas, messageel valor de se actualizará en consecuencia y el contenido de la página también cambiará sincrónicamente.

caja

Cuando tratamos con casillas de verificación, podemos usarlas v-modelpara vincular un valor booleano. A continuación se muestra un ejemplo sencillo de casilla de verificación:

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">复选框状态: {
   
   { checked }}</label>

El estado de la casilla de verificación checkedestá asociado con los datos en la instancia de Vue a través de datos. Cuando el usuario marca o desmarca la casilla de verificación, checkedel valor de se actualizará sincrónicamente, logrando así un enlace bidireccional.

un solo botón

Cuando se trata de botones de opción, podemos configurar uno mismo para cada botón v-modely uno diferente para cada botón value. De esta forma, el valor del botón seleccionado estará vinculado a los datos correspondientes en la instancia de Vue. A continuación se muestra un ejemplo de un botón de opción:

<input type="radio" id="option1" value="Option 1" v-model="picked" />
<label for="option1">选项 1</label>

<input type="radio" id="option2" value="Option 2" v-model="picked" />
<label for="option2">选项 2</label>

<p>当前选择: {
   
   { picked }}</p>

En el código anterior, pickedlos datos guardarán el valor del botón de opción seleccionado, logrando así la vinculación bidireccional del botón de opción y los datos.

Cuadro de selección desplegable

Al usar el cuadro de selección desplegable, podemos v-modelvincular el valor seleccionado a los datos en la instancia de Vue. A continuación se muestra un ejemplo de un cuadro de selección desplegable simple:

<label for="selectBox">下拉选择框：</label>
<select v-model="selected">
  <option value="">请选择一个选项</option>
  <option value="Option A">选项 A</option>
  <option value="Option B">选项 B</option>
  <option value="Option C">选项 C</option>
</select>
<p>当前选择: {
   
   { selected }}</p>

En el código anterior, cuando el usuario selecciona una opción en la lista desplegable, selectedel valor de se actualiza y la selección actual que se muestra en la página también se actualiza en tiempo real.

Caja

Para cuadros de selección múltiple, podemos multipleimplementar la función de selección múltiple agregando atributos. Del mismo modo, utilícelo v-modelpara el enlace de datos. A continuación se muestra un ejemplo de un cuadro de selección múltiple:

<label for="multiSelectBox">多选框：</label>
<select v-model="selectedMultiple" multiple>
  <option value="Option A">选项 A</option>
  <option value="Option B">选项 B</option>
  <option value="Option C">选项 C</option>
</select>
<p>当前选择: {
   
   { selectedMultiple }}</p>

selectedMultipleLos datos guardan los valores de múltiples opciones seleccionadas por el usuario, realizando una vinculación bidireccional entre el cuadro de selección múltiple y los datos.

Demostración del modificador

Vue.js también proporciona algunos modificadores para cambiar el comportamiento predeterminado de las entradas del formulario. Aquí hay una demostración de algunos modificadores:

• Modificador diferido : utilice .lazyel modificador para retrasar el enlace de datos hasta que changese active el evento en lugar inputdel evento. Esto es útil cuando se trata de grandes cantidades de entrada.

<label for="lazyInput">Lazy 输入：</label>
<input id="lazyInput" v-model.lazy="lazyText" />
<p>Lazy 文本: {
   
   { lazyText }}</p>

• Modificador de número : utilice .numberel modificador para convertir automáticamente los valores ingresados ​​por el usuario en tipos numéricos. Esto es muy conveniente en escenarios donde necesita ingresar números.

<label for="numberInput">数字输入：</label>
<input id="numberInput" v-model.number="numericValue" />
<p>数字值: {
   
   { numericValue }}</p>

• Modificador de recorte : utilice .trimel modificador para eliminar automáticamente espacios en ambos extremos de la entrada del usuario. Esto es útil para eliminar espacios innecesarios cuando el usuario escribe.

<label for="trimInput">去除空格输入：</label>
<input id="trimInput" v-model.trim="trimmedText" />
<p>去除空格后的文本: {
   
   { trimmedText }}</p>

Al utilizar estos modificadores de manera adecuada, podemos manejar la entrada del usuario de manera más flexible y mejorar la experiencia del usuario.
Código completo:

<template>
  <div>
    <!-- 文本输入 -->
    <label for="textInput">输入文本：</label>
    <input id="textInput" v-model="text" placeholder="输入文本" />
    <p>输入的文本是: {
   
   { text }}</p>

    <!-- 多行文本输入 -->
    <label for="textArea">多行文本：</label>
    <textarea id="textArea" v-model="message" placeholder="输入多行文本"></textarea>
    <p>多行文本是:</p>
    <pre>{
   
   { message }}</pre>

    <!-- 复选框 -->
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">复选框状态: {
   
   { checked }}</label>

    <!-- 单选按钮 -->
    <input type="radio" id="option1" value="Option 1" v-model="picked" />
    <label for="option1">选项 1</label>

    <input type="radio" id="option2" value="Option 2" v-model="picked" />
    <label for="option2">选项 2</label>

    <p>当前选择: {
   
   { picked }}</p>

    <!-- 下拉选择框 -->
    <label for="selectBox">下拉选择框：</label>
    <select v-model="selected">
      <option value="">请选择一个选项</option>
      <option value="Option A">选项 A</option>
      <option value="Option B">选项 B</option>
      <option value="Option C">选项 C</option>
    </select>
    <p>当前选择: {
   
   { selected }}</p>

    <!-- 多选框 -->
    <label for="multiSelectBox">多选框：</label>
    <select v-model="selectedMultiple" multiple>
      <option value="Option A">选项 A</option>
      <option value="Option B">选项 B</option>
      <option value="Option C">选项 C</option>
    </select>
    <p>当前选择: {
   
   { selectedMultiple }}</p>

    <!-- 修饰符演示 -->
    <label for="lazyInput">Lazy 输入：</label>
    <input id="lazyInput" v-model.lazy="lazyText" />
    <p>Lazy 文本: {
   
   { lazyText }}</p>

    <label for="numberInput">数字输入：</label>
    <input id="numberInput" v-model.number="numericValue" />
    <p>数字值: {
   
   { numericValue }}</p>

    <label for="trimInput">去除空格输入：</label>
    <input id="trimInput" v-model.trim="trimmedText" />
    <p>去除空格后的文本: {
   
   { trimmedText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 文本输入
      text: "",

      // 多行文本输入
      message: "",

      // 复选框
      checked: false,

      // 单选按钮
      picked: "",

      // 下拉选择框
      selected: "",

      // 多选框
      selectedMultiple: [],

      // 修饰符演示
      lazyText: "",
      numericValue: 0,
      trimmedText: ""
    };
  }
};
</script>