VUE2.0 【v-html】標簽使用技巧
阿新 • • 發佈:2017-12-28
ava turn 數據 ati col hang war 菜單 rul
<div class="active-rules"> <div class="weui-weixin-content" id="rules"> <p>活動名稱:{{message1}}</p> <p>活動時間:{{message2}}</p> <p>活動獎品:<span v-html="newMessage3">{{newMessage3}}</span></p> <p>發獎時間:{{message4}}</p> <p>{{message5}}</p> </div> <div class="acrive-line"></div> <div class="active-code"> <p>商家二維碼</p> <div class="code"> <img src="../../../static/b2b-reception/images/icon-exchange-3.png"> </div> <div class="active-btn"> <a href="javascript:;" class="weui_btn weui_btn_warn">返回</a> </div> </div> </div>
new Vue({ el: ‘#rules‘, data:{ message1: ‘感恩回饋大轉盤‘, message2: ‘2017.9.22-2016.10.31‘, message3:‘1.雙色球一註~2.通用積分100鋇‘, message4: ‘中獎後,即時發放。‘, message5:‘請關註公眾號(**通)點擊菜單大轉盤參與活動‘ }, computed: { newMessage3: function () { var str =""; var newStr = this.message3.split(‘~‘); for (var i=0;i<newStr.length;i++ ){ str+=newStr[i] + "</br>" } return str; } } });
message3的內容長度不確定,每段內容使用~分割,在頁面時使用vue的computed方法對數據進行處理,然後使用v-html指令渲染到頁面上,正常的{{message3}}會默認把內容全部渲染成字符串,
VUE2.0 【v-html】標簽使用技巧