Vue中组件使用template的失效问题

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><temp></temp></div>&lt

米咔米苏的零食

4571人浏览 · 2020-10-15 10:36:02

米咔米苏的零食 · 2020-10-15 10:36:02 发布

<!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>中，即

<div>

。。内容.。。。

</div>

</template>

错误案例：

<template id="cpnc">

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

</template>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^