欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

VUE中template的三种写法

时间:2022-12-26 10:53:18|栏目:vue|点击:

一、直接写在构造器中

    <!-- 第一种写法:直接写在构造器里 -->
    <div id ="app1"> </div>
    <script>
        var vm1 = new Vue({
           el: '#app1',
           data: {},
           methods: {},
           template:`<h3>在构造器中的文字</h3>`
        });
    </script>

二、写在HTML自带的<template>标签中

    <!-- 第二种写法:写在HTML自带的标签里 -->
   <div id ="app2">
       <template id="item1">
        <h3>Template标签的文字</h3>
       </template>
    </div>
    <script>
        var vm2 = new Vue({
           el: '#app2',
           data: {},
           methods: {}, 
           template:'#item1'
        });
    </script>

三、写在<script>标签中

    <!-- 第三种写法:写在script标签里 -->
   <div id ="app3">
       
     </div>
   <script type="x-template" id="item3">
        <h3>写在script的文字</h3>
   </script>
    <script>
     let vm3 = new Vue({
        el: '#app3',
        data: {},
        methods: {},
       
        template:'#item3'
     });
    </script>

上一篇:Vue使用Canvas生成随机大小且不重叠圆

栏    目:vue

下一篇:vue中异步函数async和await的用法说明

本文标题:VUE中template的三种写法

本文地址:http://www.codeinn.net/misctech/222248.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有