zoukankan      html  css  js  c++  java
  • 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}}会默认把内容全部渲染成字符串,
  • 相关阅读:
    架构漫谈1
    如何将本地工程上传到github
    寒假日报day23
    寒假日报----首都之窗爬虫大作业
    寒假日报day22
    寒假日报day21
    关于webmagic的post请求
    寒假日报day20
    寒假日报day19
    吾日三省吾身(41)
  • 原文地址:https://www.cnblogs.com/zhixi/p/8136794.html
Copyright © 2011-2022 走看看