Question

我正在Vuejs中创建第一个视图：

<template>
  <p>Welcome to MyWebsite</p>
  <p>These terms and conditions outline the rules and regulations for the use of MySite Website.</p> <br />
  <span style="text-transform: capitalize;"> MySite</span> is located at:<br />
  <address>Adresss , City<br />State - 00000, USA<br />
  </address>

</template>

但我总是得到

欢迎使用MyWebsite

这些条款和条件概述   使用MySite网站的规则和规定。

   MySite位于   at：
地址，城市
州 - 00000，美国





组件模板应该只包含一个根元素。如果您在多个元素上使用v-if，请使用v-else-if链接它们   代替。

为什么建议我使用v-if？我不明白我该怎么办？此致

Answer 1

组件模板应该只包含一个根元素。

<template>
  <div><!-- ONLY ONE DIRECT CHILD IN THE TEMPLATE --> 
    <p>Welcome to MyWebsite</p>
    <p>These terms and conditions outline the rules and regulations for the use of MySite Website.</p> <br />
    <span style="text-transform: capitalize;"> MySite</span> is located at:<br />
    <address>Adresss , City<br />State - 00000, USA<br /></address>
  </div>
</template>

Answer 2

出于类似的原因，为什么React can only render a single root node Vue.js要求<template>中的第一件事是打开包含元素，其中将写入模板的其余部分。 Vue.js猜测这是你想要的，但最好是明确的。因此，要解决它：

<template>
   <div> 
      <p>Welcome to MyWebsite</p>
      <p>These terms and conditions outline the rules and regulations for the use of MySite Website.</p> <br />
      <span style="text-transform: capitalize;"> MySite</span> is located at:<br />
      <address>Adresss , City<br />State - 00000, USA<br />
      </address>
   </div>
</template>

Answer 3

根元素是指你的组件root div-like元素，<template></template>

所以，vue告诉你，在这些根组件下面你应该只有一个元素：这意味着，

<template>
  <div>
      // put everything here
  </div>
</template>

Answer 4

如上所述，您需要将内容封装在一个唯一的块（div，section ...）中。

<template>
  <section>
    ....
  </section>
</template>

在Vue.js中创建第一个视图

4 个答案: