Vue 重学之旅：Day 02 - 走进更深层的指令世界

初序

纸上得来终觉浅，绝知此事要躬行。在上一章关于《Vue 重学 Day 01》中，我们已经讲了 Vue 的基本指令。今天，我们将继续深入学习其他指令，包括：

• v-bind:class：绑定类样式
• v-style：绑定内联样式
• v-for：循环渲染
• v-if：条件渲染
• v-model：双向绑定

1. v-bind:class - 动态类样式绑定

v-bind:class 指令允许您动态地将类样式绑定到元素。这对于创建根据数据变化而改变外观的元素非常有用。例如，我们可以使用 v-bind:class 指令来创建一个根据其状态（例如，是否处于活动状态）而改变颜色的按钮：

<button v-bind:class="{ 'btn-primary': isActive, 'btn-default': !isActive }">
  按钮
</button>

在这种情况下，v-bind:class 指令将根据 isActive 数据属性的值在按钮上应用 btn-primary 或 btn-default 类。

2. v-style - 动态内联样式绑定

v-style 指令允许您动态地将内联样式绑定到元素。这对于创建具有动态样式的元素非常有用。例如，我们可以使用 v-style 指令来创建一个根据其宽度而改变字体大小的文本元素：

<p v-style="{ fontSize: width + 'px' }">
  文本
</p>

在这种情况下，v-style 指令将根据 width 数据属性的值在文本元素上应用 font-size 样式。

3. v-for - 循环渲染

v-for 指令允许您循环遍历数组或对象并为每个元素渲染一个模板。这对于创建列表、表格或其他重复元素非常有用。例如，我们可以使用 v-for 指令来创建一个显示所有待办事项的列表：

<ul>
  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
</ul>

在这种情况下，v-for 指令将遍历 todos 数组并为每个待办事项渲染一个 <li> 元素。

4. v-if - 条件渲染

v-if 指令允许您根据条件是否为真来有条件地渲染元素。这对于创建仅在满足某些条件时才显示的元素非常有用。例如，我们可以使用 v-if 指令来创建一个仅在用户登录时才显示的欢迎消息：

<div v-if="isLoggedIn">
  欢迎回来，{{ username }}！
</div>

在这种情况下，v-if 指令将检查 isLoggedIn 数据属性的值，并仅在为真时渲染欢迎消息。

5. v-model - 双向绑定

v-model 指令允许您将输入元素（如文本输入框或复选框）与数据属性绑定。这使得您可以轻松地创建与用户交互的表单。例如，我们可以使用 v-model 指令创建一个文本输入框，并将该输入框的值绑定到 username 数据属性：

<input v-model="username">

在这种情况下，v-model 指令将使文本输入框的值与 username 数据属性保持同步。这意味着当用户在文本输入框中输入内容时，username 数据属性的值也会更新。