vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > VUE中template写法

VUE中template的三种写法

作者:農碼一生

这篇文章介绍了VUE中template的三种写法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

一、直接写在构造器中

    <!-- 第一种写法:直接写在构造器里 -->
    <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中template写法的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文