Template 制作模版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>template使用</title>
</head>
<body>
<h1>template使用</h1>
<hr>
<div id="app"></div>
<!--挂载点-->
使用标签< template id="demo2">的方式挂载：<author id="author"></author>
<template id="demo2">
<h2 style="color:red">我是template标签模板</h2>
</template>
<br>
使用id的方式< div id="author">挂载： <div id="x-template"></div>
<script type="x-template" id="demo3">
<h2 style="color:red">我是script标签模板</h2>
</script>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},//直接为id=app这个节点挂载这个模板
template:`
<h1 style="color:red">我是选项模板</h1>
`
})
//template标签模板
var author=new Vue({
el:'#author',
data:{
message:'hello Vue!'
},
template:'#demo2'
})
//script标签模板
var template=new Vue({
el:'#x-template',
data:{
message:'hello Vue!'
},
template:'#demo3'
})
</script>
</body>
</html>
437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
