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}}會默認把內容全部渲染成字符串，