<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<temp></temp>
</div>
<template id="cpnc">
<div> <!--这行-->
<h1>{
{ok}}</h1>
<h1>ZTY</h1>
</div> <!--到这行-->
</template>
<script src="../../js/vue.js"></script>
<script>
const temp={
template: '#cpnc',
data: function () {
return {
ok: "nihao"
}
}
}
const app = new Vue({
el: '#app',
components:{
temp
}
})
</script>
</body>
</html>The correct operation result of the code is shown in the figure
The key is to put the template in <div></div>, that is
<template>
<div>
. . content.. . .
</div>
</template>
Error case:
<template id="cpnc">
<h1>{
{ok}}</h1>
<h1>ZTY</h1>
</template>