深入理解 Vue 中的指针操作(二)

news2025/1/20 16:29:14

文章目录

- ☘️引言
- ☘️基本用法
- - 🍂v-for指令
  - 🍂v-model指令
  - - 🌱v-model适用表单控件
- ☘️结论

☘️引言

Vue.js 是一款非常流行且功能强大的前端框架，它以其响应式的数据绑定和组件化的开发方式赢得了众多开发者的喜爱。而在 Vue.js 中，指针操作是一个非常重要的概念，它能够帮助我们更好地处理和操作数据。本篇博客将深入探讨 Vue 中的指针操作，分享一些实用的技巧和注意事项。

续　➡　深入理解 Vue 中的指针操作(一)

☘️基本用法

🍂v-for指令

Vue 的 v-for 指令用于渲染列表和集合数据。它的语法如下：

<div v-for="(item, index) in items" :key="item.id">{{ item.name }}</div>

其中，items 表示要遍历的数组或对象；item 和 index 是当前遍历项的值和索引；:key 表示为每个节点指定一个唯一的 key 值，以提高性能。item.id 可以换成其他具有唯一性的属性。

除了以上语法外，还可以使用 v-for 的简写方式：

<div v-for="item in items">{{ item.name }}</div>

这等效于 v-for=“(item, index) in items”，只是没有了索引变量。

在 v-for 中，还可使用特殊的别名 $index 来代表当前遍历的元素的索引值：

<div v-for="(item, $index) in items">{{ $index }}. {{ item.name }}</div>

在 v-for 的 items 数组或对象发生变化时，Vue 会自动重新计算视图，并进行最小化渲染，以提高性能。

代码示例：
以下是一个使用 v-for 渲染数组的例子：

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>
new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' }
    ]
  }
});

运行该示例，会在页面上展示一个包含三个水果列表项的无序列表。
运行结果：
在这里插入图片描述

还可以使用 v-for 渲染对象，例如：

<div id="app">
  <ul>
    <li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
  </ul>
</div>
new Vue({
  el: '#app',
  data: {
    object: {
      a: 'Apple',
      b: 'Banana',
      c: 'Orange'
    }
  }
});

该示例会在页面上展示一个包含三个键值对的列表项。
运行结果：
在这里插入图片描述
注意：为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

🍂v-model指令

model 是 Vue 中常用的指令之一，用于将表单元素的值和 Vue 实例中的数据绑定起来，实现双向数据绑定。

使用 v-model 的语法如下：

<input v-model="message">

其中，message 是 Vue 实例中的数据，可以是 data、computed 或 props 中的属性。

对于单选框和复选框等表单元素，v-model 还可以接受一个参数，如：

<input type="checkbox" v-model="checked">

对于单选框，checked 可以是布尔类型的数据；对于多选框，checked 可以是数组类型的数据。

在使用 v-model 绑定表单元素的值时，Vue 实例中的数据并不会立即更新，而是在表单元素的值发生变化并触发 input 事件时才会更新。如果需要在表单元素失去焦点时更新数据，则可以使用 v-model.lazy 修饰符。

另外，对于某些输入类型，例如 number、range 等，会将输入的字符串自动转换为对应的数据类型。如果需要绑定的数据不是字符串，可以使用 v-bind:value 显式地绑定输入框的值。

以下是 v-model 的一个示例：

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>
new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

运行该示例，在输入框中输入文本，下方会实时显示输入的文本。
运行结果：
在这里插入图片描述

🌱v-model适用表单控件

v-model 指令适用于以下表单控件：

➡：包括文本输入框、密码输入框、复选框、单选框等。
➡：文本域输入框。
➡：下拉选择框。
自定义组件：如果自定义组件在内部使用了合适的输入控件，并且实现了 value 属性和 input 事件，那么也可以使用 v-model 来进行数据的双向绑定。
例如，可以使用 v-model 指令绑定以下表单控件：

<div id="app">
  <input type="text" v-model="username">
  <input type="password" v-model="password">
  <input type="checkbox" v-model="rememberMe">
  
  <textarea v-model="message"></textarea>
  
  <select v-model="selectedOption">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>
new Vue({
  el: '#app',
  data: {
    username: '',
    password: '',
    rememberMe: false,
    message: '',
    selectedOption: ''
  }
});