VUE中template的三种写法
短信预约 -IT技能 免费直播动态提醒
一、直接写在构造器中
<!-- 第一种写法:直接写在构造器里 -->
<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写法的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持编程网。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341