假如有一个姓名数组:
names: ["jack","rose","kaka","curry"]在 Vue 中如何显示和添加元素呢？
v-for
{{ }} 和 v-text 如果用来输出数组，会直接显示整个数组。因此，我们需要 v-for 来显示数组：
// html
<div id="root">
<ul>
<li v-for = "name in names"> {{ name }}</li>
</ul>
</div>
// js
let data = {
names: ["jack","rose","kaka","curry"]
};
var vm = new Vue({
el: '#root',
data:data
})现在，我们考虑为数组添加元素，效果如下
功能很简单：添加姓名，然后清空输入框
用 js 添加姓名
首先，考虑用 js 实现：
<div id="root">
<ul>
<li v-for = "name in names"> {{ name }}</li>
</ul>
<input type="text" id="addName">
<button id="submit">添加姓名</button>
</div>
// js
let data = {
names: ["jack","rose","kaka","curry"]
};
var vm = new Vue({
el: '#root',
data:data,
mounted() {
document.querySelector('#submit').addEventListener('click',function(){
let nameElement = document.querySelector('#addName'); //监听
vm.names.push(nameElement.value); // 添加姓名
nameElement.value = ''; // 清空输入框
})
}
});实例一加载，就会执行 mounted 函数，我们使用了简写，相当于:
mounted:function(){
}用 vue 添加姓名
现在，我们来用 Vue 实现同样的功能：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
</head>
<body>
<div id="root">
<li v-for = "name in names"> {{ name }}</li>
<input type="text" v-model="newName">
<button v-on:click="addName()">添加姓名</button>
</div>
<script>
let data = {
names: ["jack","rose","kaka","curry"],
newName: "" // 绑定 input 元素，最初为空
};
var vm = new Vue({
el: '#root',
data:data,
methods: {
addName() {
vm.names.push(vm.newName);
vm.newName = "";
}
}
});
</script>
</body>
</html>这里，主要使用了 v-on 指令，一但用户点击添加按钮，就会触发 addName() 方法。v-on 也可以简写成 @:
<button @click="addName()">添加姓名</button>方法需要放入 methods 属性，这样既可以通过 vm 来访问，也可以在指令表达式中使用。
附录：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。