VUE2.0 v-html标签使用技巧

Posted 2020-10-19 zhixi

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