VUE2.0 "v-html" label usage tips

<Divclass= "Active-rules">    <Divclass= "Weui-weixin-content"ID= "Rules">        <P>Activity name: {{Message1}}</P>        <P>Active Time: {{message2}}</P>        <P>Event Prizes:<spanv-html= "NewMessage3">{{NewMessage3}}</span></P>        <P>Awards time: {{message4}}</P>        <P>{{Message5}}</P>    </Div>    <Divclass= "Acrive-line"></Div>    <Divclass= "Active-code">        <P>Two-dimensional code for business</P>        <Divclass= "Code">            <imgsrc=".. /.. /.. /static/b2b-reception/images/icon-exchange-3.png ">        </Div>        <Divclass= "Active-btn">            <ahref= "javascript:;"class= "Weui_btn Weui_btn_warn">Return</a>        </Div>    </Div></Div>

    NewVue ({el:' #rules ', data:{message1:' Thanksgiving rewards Big carousel ', Message2:' 2017.9.22-2016.10.31 ', Message3:' 1. Color ball A note to the general point 100 barium ', Message4:' Immediately after winning the lottery. ‘, Message5:' Please pay attention to the public number (* * pass) Click on the menu big turntable participation Activities '}, computed: {newMessage3:function () {                varstr = ""; varNewstr = This. Message3.split (' ~ ');  for(vari=0;i<newstr.length;i++) {str+=newstr[i] + "</br>"                }                returnstr; }        }    });

Message3 content length is not certain, each content uses the ~ division, in the page uses Vue's computed method to process the data, and then uses the v-html instruction to render to the page, the normal {{Message3}} will render the content all by default to the string,

VUE2.0 "v-html" label usage tips