<!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>

  代码的正确的运行结果如图

关键在于要将模板放入<div></div>中,即

<template>

<div>

     。。内容.。。。

</div>

</template>

错误案例:

<template id="cpnc">

  <h1>{{ok}}</h1>
  <h1>ZTY</h1>

</template>

 

Logo

前往低代码交流专区

更多推荐