template 模版制作

最新推荐文章于 2025-09-03 16:51:19 发布

weixin_30402343

最新推荐文章于 2025-09-03 16:51:19 发布

阅读量88

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jinsuo/p/8480371.html

<!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>