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写法的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。