拼接时代+动态创建时代+数据绑定时代

Posted 2020-08-07

拼接时代

直接上例子看吧

 1 this.images=[//json格式的数据 必须双引号 必须键值对形式
 2             {small:‘../images/s11.jpg‘,big:‘../images/s11.jpg‘},
 3             {small:‘../images/s12.jpg‘,big:‘../images/s12.jpg‘},
 4             {small:‘../images/s13.jpg‘,big:‘../images/s13.jpg‘}
 5         ]
 6 
 7 bindDOMImageOld:function(){//数据拼接的基本方式（基本都是数组形式的）
 8         var str=‘‘
 9         for(var i= 0,len=this.images.length;i<len;i++) {
10             str+=‘<li>‘
11                 str+=‘<img class="etalage_thumb_image" src="‘+ this.images[i].small+‘" class="img-responsive" />‘
12                 str+=‘<img class="etalage_source_image" src="‘+ this.images[i].small+‘" class="img-responsive" />‘
13             str+=‘</li>‘
14         }
15         $(‘#etalage‘).html(str)

 

 

 

动态创建时代

 

 

 

数据绑定时代

 

 

//arttemplate语法：返回拼接好并绑定好的数据

模板的方式只是多一种数据绑定的方式；