指令

我们可以使用基本的 Vue.js 指令来为 Hello 组件添加更多的功能与数据逻辑。

v-for

v-fot指令允许我们遍历某个数组并且将每一个元素渲染到模板中，我们可以先创建如下的数组：

{
  users: [
    { firstname: "Sebastian", lastname: "Eschweiler" },
    { firstname: "Bill", lastname: "Smith" },
    { firstname: "John", lastname: "Porter" },
  ];
}

然后使用v-for指令遍历该列表并且提取出每个元素的firstname与lastname值：

<div>
  <ul>
  <li v-for="user in users">
  {{user.firstname}} {{user.lastname}}
  </li>
  </ul>
</div>

v-model

v-model指令会在输入元素与组件之间创建双向数据绑定，我们首选需要定义一个存放数据的变量：

input_val: ''

然后使用v-model将变量绑定到元素上：

<div>  <input type="text" v-model="input_val" /></div>

这种双向绑定会有两个效果：

• 每次用户输入值时都会同步更新到input_val变量
• 如果我们在程序中手动修改input_val变量的值，元素中的展示值也会被相应更新

v-text

v-text指令被用于设置文本内容，其作用等效于{{...}}，我们可以用其来展示部分文本：

Input Value: <span v-text="input_val"></span>