vue.js拼接动态html赋值很好用

 

 

 

 

 

 

 

 

开发者资源聚集地

 https://www.baiydu.com

vue.js在拼接动态html赋值这块比之前用的jquery和javascrip好用太多了，它还能直接给标签属性赋值，这里只简单说下。

1.之前用过的方式代码如下 

 var json = eval('(' + data + ')');
var a,b,c,d
 for (var i = 1; i <= 30; i++) {
         for (var j = 1; j <= 4; j++) {
              if (j == 1) {
                  a = beginData + i
              } else {
                 b = a + 30;
                 c = a + 60;
                 d = a + 90
              }
         }
         shareHtml += " <tr><td colspan='2'>" + a + "------- <a>*******</a></td><td colspan='2'> " + b + "------- <a>*******</a></td><td colspan='2'>" + c + "------- <a>*******</a> </td><td colspan='2'>" + d + "------- <a>*******</a> </td></tr>"
      }

 

 

 2.vue.js方式(vue拼接html前后一个反单引号,它的赋值拼接不会像第一种原始方式那样遇到赋值就会使用加号，而是直接一整块。原始方式不但拼接慢，而且很容易出错 。

如果是

var loginUser= eval('(' + data + ')'); 

 innerHtml=`<div class="ad-vip"><img src="images/ad-channel.jpg" alt="vip" title="vip"></div>
                                  <div style='padding-top:35px'><div class="container" ><div class="member-vip-card"><h1 class="yellow">尊敬的资源VIP</h1>
                                                     <div class="time">${loginUser.resourceMemberBeginData} —  ${loginUser.resourceMemberFinishData}</div>
                                                     <div class="watch" style='margin-left:55px'>每日可查看联系方式<span id="own-resource-vip-watch-times" style='color:red'> ${loginUser.memeberTypeArray[0].lookResourceTimesEveryDay}</span>条（渠道板块除外）
                                                     </div> <div class="publish">每日发布需求<span id="own-resource-vip-publish-topic-times" style='color:red'>${loginUser.memeberTypeArray[0].PublishResourceEveryDay}</span>次,总赠送置顶<span style='color:red' id='resourceSetTopTimes'>${loginUser.memeberTypeArray[0].resourceSetTopTimes}</span>次
                                                     </div><button class="resource-vip-button">续 费</button>
                                                 </div><div class="no-member-vip-card"><h1 class="yellow">您还未激活渠道VIP会员！</h1><button class="channel-vip-button">开 通</button>
                                                 </div></div>
                                                      </div>`