使用v-model绑定 使用v-for渲染列表

Vue.js中的`v-model`指令是一个双向数据绑定的简写形式，它允许你在HTML模板中直接操作组件实例的数据属性。当你在一个输入元素如`<input>`、`<textarea>`或`<select>`上使用`v-model`，Vue会自动将其值与对应的JavaScript对象属性关联起来，并在用户交互时实时更新。例如：

<input type="text" v-model="message">

在这个例子中，`message`这个变量的值会实时反映到输入框的显示内容中。

而`v-for`则是用于数组或对象循环遍历的指令，帮助我们在页面上动态渲染列表。例如，假设我们有一个`items`数组，我们可以这样做：

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

这里，每个`<li>`标签会对应数组`items`中的一个元素，`item.name`会被渲染出来。`:key`用于给列表项唯一标识，避免浏览器重绘性能问题。