在定义Vue组件时,组件的模板template选项需要的是一个字符串,当其内容较复杂需要换行时,需要简单处理一下,具体有五种方式:

方式一:使用 \ 转义换行符

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Test page</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
</div> <script>
new Vue({
el : "#app",
components : {
'my-header' : {
template : '<div>\
<h1>hello</h1>\
<h2>world</h2>\
</div>'
}
}
})
</script>
</body>
</html>

方法二:使用ES6的 ` 模板字符串

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Test page</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
</div> <script>
new Vue({
el : "#app",
components : {
'my-header' : {
template : `<div>
<h1>hello</h1>
<h2>world</h2>
</div>`
}
}
})
</script>
</body>
</html>

方法三:使用template模板标签

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Test page</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
</div> <template id="temp">
<div>
<h1>hello</h1>
<h2>world</h2>
</div>
</template> <script>
new Vue({
el : "#app",
components : {
'my-header' : {template : "#temp"}
}
})
</script>
</body>
</html>

方法四:使用<script type="text/x-template">

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Test page</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
</div> <script type="text/x-template" id="temp">
<div>
<h1>hello</h1>
<h2>world</h2>
</div>
</script> <script>
new Vue({
el : "#app",
components : {
'my-header' : {template : "#temp"}
}
})
</script>
</body>
</html>

方法五:使用单独的vue模块文件

在前端工程化后,可以将组件放在独立的vue文件中,这样就可以直接在模板中写html代码了。

05-11 09:24
查看更多