template模板的写法

最新推荐文章于 2025-02-16 19:28:28 发布

粥小思

最新推荐文章于 2025-02-16 19:28:28 发布

阅读量990

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/Lucky_3/article/details/108375045

版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Vue.js中模板的三种常见写法：1) 在构造器中通过template选项设置模板，需要注意特殊符号的使用；2) 直接编写模板，并在data中绑定id；3) 使用script标签外联模板，适用于外部引用并在构造器内声明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、直接在构造器中写template选项。

注意：template选项标签的符号是上撇号，比较特殊。

 <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'helloworld!'
            },
            template: `
                <h2 style="color:red">我是一个选项模板</h2>
            `
        })
 </script>

2、标签直接写模板，还要在构造器中的data中进行id绑定

<div id="app">
        {{message}}
        <template id="n2">
            <h2 style="color:red">我是一个标签模板</h2>
        </template>
</div>


<script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'helloworld!',
                template: '#n2'
            },
        })
</script>

3、script标签模板

这种方式适合外部引用，在外部写一个模板，然后在构造器中声明

<script type="x-template" id="n3">
        <h2 style="color:red">我是一个script标签模板</h2>
</script>

<script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'helloworld!',
                template: '#n2'
            },
            template: '#n3'
        })
 </script>