Question

我一直在学习vuejs cli，并正在创建一个示例网站，可以在其中列出他们的文章。但是，顺便说一下，用于分成多行的br标签不起作用。当我尝试hr时，它在前端添加了一条水平线。它最终出现在巨大的水平空间中。您可以在下面找到完整的代码详细信息：

我尝试将br标签放置在多个位置，但是没有用。

我使用vue create frontend创建项目在前端文件夹中，我删除了HelloWorld.vue并添加了ListAllArticles.vue，其代码如下：

<template>
  <div class="container-fluid">
    <div class="row">
      <img src="../assets/propic.jpg" alt="Profile Pic">
      <h3>This is title 1</h3>
      <p>This is title description 1</p><br>
      <p>By John Doe</p>
    </div>
    <hr>
    <div class="row">
      <img src="../assets/propic.jpg" alt="Profile Pic">
      <h3>This is title 2</h3><br>
      <p>This is title description 2</p><br>
      <p>By John Doe</p>
    </div>
    <hr>
    <div class="row">
      <img src="../assets/propic.jpg" alt="Profile Pic">
      <h3>This is title 3</h3><br>
      <p>This is title description 3</p><br>
      <p>By John Doe</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

<style>
img {
    width: 100px;
    height: 100px;
}

hr {
background-color: #eee;
border: 0 none;
color: #eee;
height: 2px;
}
</style>

。对应的路由器index.js是

import Vue from 'vue'
import Router from 'vue-router'
import ListAllArticles from '@/components/ListAllArticles'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'ListAllArticles',
      component: ListAllArticles
    }
  ]
})

相应的index.html是：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <title>markit</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->

  </body>
</html>

有趣的是，即使是img舍入的类也不起作用。

带有br标签的输出如下所示：https://ibb.co/q0nP3Mx

当我添加hr标签时，输出如下：https://ibb.co/tcFz0bF

您可以看到br / hr标签未按预期运行，并且无法处理

为什么br标签或hr标签在vuejs模板中无法正常工作？

0 个答案: