Vuejs之打怪升级level-0

偶偶自己写点前端页面，发现vuejs挺方便的

这次练级使用的是Sam先生的博客的教程

定义数据

var lastIndex = 2,vModel = {
    list:[
        {
            id:0,
            cont: '张三'
        },
        {
            id:1,
            cont: '李四'
        },

    ],
    val: '随便输入点提示'
};

用vuejs使用数据、使用区域及方法

new Vue({
    data: vModel,
    el:'#app',
    methods:{
        add: function(){
            this.list.push({ id: lastIndex++,cont: this.val});
        },
        del:function(item){
            let index = this.list.indexOf(item);
            this.list.splice(index,1);
        }
    }
})

在html里面使用方法

v-on:click= "add()"
v-on:click= "del(item)"

循环渲染列表

       {{item.id}}
       {{item.cont}}
       del

---

以后再附完整代码

    
      
    
    
    
    



    

        
        

            
            
                add!
            
        
        
        

          
数据表格
          

            

              
id
              
cont
              
action
            
          
          

            

              
{{item.id}}
              
{{item.cont}}
              
del