VUE2.0【v-html】标签使⽤技巧
<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 () {
href标签怎么用var str ="";
var newStr = ssage3.split('~');
for (var i=0;i<newStr.length;i++ ){
str+=newStr[i] + "</br>"
}
return str;
}
}
});
message3的内容长度不确定，每段内容使⽤~分割，在页⾯时使⽤vue的computed⽅法对数据进⾏处理，然后使⽤v-html指令渲染到页⾯上，正常的{{message3}}会默认把内容全部渲染成字符串，

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。