<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{.title}}</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <style> * { padding: 0; margin: 0; } img { max-width: 100% } #app { padding: 1.5rem; width: 100vw; box-sizing: border-box; height: 100vh; } h3 { font-size: 1.3rem; padding-bottom: 1.2rem; } .slogan-time { overflow: hidden; } .floatLeft { float: left; } .floatLeft>h4 { display: inline-block; font-size: 1rem; } .floatLeft>span { border-left: 1px solid rgb(151, 150, 150); padding-left: .5rem; height: .8rem; line-height: .8rem; display: inline-block; color: rgb(151, 150, 150); margin-left: .2rem; } .floatRight { float: right; font-size: .8rem; color: rgb(151, 150, 150); } .vHmtl { padding-top: 1.2rem; width: 100%; height: auto; } </style> <body> <div id="app"> <header> <h3>{{.title}}</h3> <div class="slogan-time"> <div class="floatLeft"> <h4>{{.author}}</h4> <span>{{.time}}</span> </div> <div class="floatRight"> {{.studyCount}}人已学习 </div> </div> </header> <div class="vHmtl" v-html="hello"></div> </div> </body> </html> <script> new Vue({ el: '#app', // 选择器 data: { hello: '<p style="color:#ff0000">{{.content}}</p>' } }) </script>