<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>template模版</title> <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no,email=no" name="format-detection"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <script src="../assets/js/flexible_css.js"></script> <script src="../assets/js/flexible.js"></script> <script src="../assets/js/vue.js"></script> </head> <body> <h1>template模版 三种写法</h1> <div id="app"> {{message}} </div> <template id="dd2"> <!-- 第二种 --> <h2 style="color:red;">我是template标签模版2</h2> </template> <script type="x-template" id="dd3"> //方法3 <h2 style="color:red">我是script标签模版3</h2> </script> </body> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ message:"hello 你好", }, // template:`<h2 style="color:red">我是选项模版</h2>`, 第一种 template:"#dd2", //第二种 // template:"#dd3" //第三种 }) </script> </html>