假如有一个姓名数组:

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

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

v-for

{

// html
    
    
     
        
      
 {
   { name }}
    
     
    
// jslet data = {    names: ["jack","rose","kaka","curry"]};var vm = new Vue({    el: '#root',    data:data})

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

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

用 js 添加姓名

首先，考虑用 js 实现：

    
    
     
        
      
 {
   { name }}
    
     
    
         
     添加姓名
    
// jslet 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 来访问，也可以在指令表达式中使用。

附录：