vue.js基础（2）-列表与处理用户输入

例子基于上一节，对列表以及处理用户输入的两个案例进行总结。
（1）列表
首先在html页面中，改写为如下代码：

    
    
    


    

        
{{ message }}
       

          

           {{ person.name }} loves {{person.love}}
          
       
        
    
    

var app = new Vue({
    el: '#app',
    data: {
        message: "hello world",
persons: [
    {name: "huhx", love: "code"},
    {name: "chenhui", love: "book"}
]
    }
});

（2）处理用户输入
处理用户输入主要依靠v-on。
在html中增加一行。

点击!

在vue1.js中增加method部分。

var app = new Vue({
    el: '#app',
    data: {
        message: "hello world",
persons: [
    {name: "huhx", love: "code"},
    {name: "chenhui", love: "book"}
]
    },
    methods:{
        changeContent:function(element){
            this.message="i love"+element;
        }
    }
});