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

            }

        }

    });