<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】标签使用技巧
原文地址：https://www.cnblogs.com/zhixi/p/8136794.html