Vue2.0入门系列（2）列表

假如有一个姓名数组:

names: ["jack","rose","kaka","curry"]

在 Vue 中如何显示和添加元素呢？

v-for

{{ }} 和 v-text 如果用来输出数组，会直接显示整个数组。因此，我们需要 v-for 来显示数组：

// html


现在，我们考虑为数组添加元素，效果如下

功能很简单：添加姓名，然后清空输入框

用 js 添加姓名

首先，考虑用 js 实现：

实例一加载，就会执行 mounted 函数，我们使用了简写，相当于:

mounted:function(){
}

用 vue 添加姓名

现在，我们来用 Vue 实现同样的功能：

这里，主要使用了 v-on 指令，一但用户点击添加按钮，就会触发 addName() 方法。v-on 也可以简写成 @:

添加姓名

方法需要放入 methods 属性，这样既可以通过 vm 来访问，也可以在指令表达式中使用。

附录：

• 本节源码

• 列表渲染 &＃8211; Vue.js

• Vue.js

• Vue.js