Vue 2.0 入门系列（2）列表

假如有一个姓名数组:

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

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

v-for

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

// html

    

        
 {{ name }}
    


// js
let data = {
    names: ["jack","rose","kaka","curry"]
};

var vm = new Vue({
    el: '#root',
    data:data
})

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

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

用 js 添加姓名

首先，考虑用 js 实现：

    

        
 {{ name }}
    
    
    添加姓名



// 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 实现同样的功能：

    
    
    
    


    

        
 {{ name }}
        
        添加姓名
    

    

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

添加姓名

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

附录：

• 本节源码

• 列表渲染 - Vue.js

• Vue.js

• Vue.js