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 () {
                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}}会默认把内容全部渲染成字符串，