vue template标签用法
时间: 2023-11-21 21:05:23 浏览: 45
在Vue中,template标签用于定义Vue实例的模板。通过将模板代码包裹在template标签内部,可以将模板代码的结构和内容与Vue实例进行关联。
template标签有两种用法:
1. 将template标签作为Vue实例的根元素,即将Vue实例绑定到template标签所在的DOM元素内部。这种用法适用于需要将Vue实例的模板完全替换掉原有的DOM结构的情况。例如:
```
<template>
<div>
{{ message }}
</div>
</template>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>
```
在上面的例子中,Vue实例绑定到了id为app的元素内部,template标签中的内容会完全替换掉id为app的元素内部的原有内容。
2. 将template标签作为Vue实例中的一个属性,即在Vue实例中定义template属性,并指定template属性的值为template标签所包裹的内容。这种用法适用于需要在Vue实例所绑定的DOM元素内部插入一段模板代码的情况。例如:
```
<div id="app">
<template>
<div>
{{ message }}
</div>
</template>
</div>
<script>
new Vue({
el: '#app',
template: `
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
`,
data: {
title: 'Vue Template',
content: 'This is a template example in Vue.'
}
})
</script>
```
在上面的例子中,Vue实例绑定到了id为app的元素内部,template标签中的内容会被插入到id为app的元素内部。