美文网首页
22_template模板外置

22_template模板外置

作者: CHENPEIHUANG | 来源:发表于2018-02-10 05:00 被阅读0次
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <my-component></my-component>
            </div>
            <script src="js/vue.js"></script>
            <script type="x-template" id="myTmpl">
                <div>
                    <h1>标题--{{title}}</h1>
                    <h2>内容--{{content}}</h2>
                </div>
            </script>
            <script>
                var vm = new Vue({
                    el:"#app",
                    components:{
                        'my-component':{
                            //模板使用x-template引入
                            template:"#myTmpl",
                            data(){
                                return {
                                    title:"标题插值成功",
                                    content:"内容插值成功"
                                }
                            }
                        }
                    }
                })
            </script>
        </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:22_template模板外置

          本文链接:https://www.haomeiwen.com/subject/iscctftx.html