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>`