Vuejs——v-for学習

4487 ワード

勉強中.....
v-forループ通常配列




    
    
    
    Document
     



    

:{ {i}}---- { {item}}-

var vm=new Vue({ el:'#app', data:{ list:[1,2,3,4,5,6,7] }, methods:{} });

v-forループオブジェクト配列




    
    
    
    Document
     



    

id:{ {user.id}}------ :{ {user.name}}--- :{ {item}}

var vm=new Vue({ el:'#app', data:{ list:[ {id : 1,name:'sz1'}, {id : 2,name:'sz2'}, {id : 3,name:'sz3'}, {id : 4,name:'sz4'}, ] }, methods:{} });

v-forループオブジェクト




    
    
    
    Document
     



    

:{ {va1}}----- :{ {key}} --- :{ {item}}

var vm=new Vue({ el:'#app', data:{ user:{ id:1, name:' ', gender:' ', } }, methods:{} });

v-for反復数




    
    
    
    Document
     



    

{ {count}}

var vm=new Vue({ el:'#app', data:{ }, methods:{} });

v-forループにおけるkey属性の使用




    
    
    
    Document
     



    

{ {item.id}}---- { {item.name}}

var vm=new Vue({ el:'#app', data:{ id:'', name:'', list:[ {id:1,name:' '}, {id:2,name:' '}, {id:3,name:' '}, {id:4,name:' '}, {id:5,name:' '}, ] }, methods:{ add(){ // this.list.push({id: this.id,name: this.name}) this.list.unshift({id: this.id,name: this.name}) } } });

未完!!!