Vue.js
Vue 2.0 入门系列（2）列表
发布时间：2019-05-28 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Vue 2.0 入门系列（2）列表，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
假如有一个姓名数组:
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 实现同样的功能：