template模板的写法

tech2022-09-08  100

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>

 

最新回复(0)