将 Vue.js id 应用于正文时，标题中的徽标不可见
Posted
技术标签:
【中文标题】将 Vue.js id 应用于正文时，标题中的徽标不可见【英文标题】：Logo in header is not visible when Vue.js id is applied to the body 【发布时间】：2021-07-18 00:56:23 【问题描述】：我正在将登录页面模板从 Angular.js 转换为 Vue.js (v. 3)，并且遇到了一个问题，即脚本应用于整个正文而不是仅应用于特定元素。
当我将 id="awApp" 应用于正文时，我的徽标图像不会呈现。它存在于开发工具中，但在浏览器中不可见。如果我将 id="awApp" 移至 ，则脚本会排除标题并且徽标可见。 我需要脚本能够在整个页面上工作，但不确定我哪里出错了。 到目前为止，我的脚本是一个超级简单的函数，可以确定版权的当前年份。
**请注意：Vue.js v.3 和一般的 Vue.js 对我来说是新的。我是一个 react.js 的女孩，发现自己处于需要 Vue.js 的位置。任何帮助都非常感谢！
请看下面的代码sn-p：
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="MindFire Agency" />
<link rel="icon" href="##URL_FAV_ICON##" />
<title>Mindfire Agency</title>
<!-- Bootstrap core CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
/>
<style>
main > .container
padding: 60px 15px 0;
.bd-placeholder-img
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
@media (min-width: 768px)
.bd-placeholder-img-lg
font-size: 3.5rem;
</style>
</head>
<body id="awApp" class="d-flex flex-column h-100">
<header>
<!-- FIXED NAVBAR AND/OR HEADER -->
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<div class="container">
<a class="navbar-brand"><img
src="http://www.mindfire.agency/static/images/mindfire-agency-logo.png"
/></a>
</div>
</div>
</nav>
</header>
<!-- / HEADER/NAVBAR -->
<!-- MAIN CONTENT -->
<main role="main" class="flex-shrink-0">
<div class="container">
<div class="row mt-5 gx-5">
<div class="col-md-7">
<img
src="http://placehold.it/1200x400"
class="img-fluid"
/>
<h2 class="mt-3">Headline goes here...</h2>
<p>##firstname##,</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis
dolore eaque, facere id molestias perspiciatis sit? Accusantium
aspernatur delectus eius fuga id modi non, obcaecati perferendis
quia, quidem quos repellendus.
</p>
<ul>
<li>benefit 1</li>
<li>benefit 2</li>
<li>benefit 3</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid
assumenda consectetur deleniti est ipsam nemo nobis officiis quasi,
quod! Ad illum labore laudantium nemo, nesciunt nisi porro
recusandae repellat.
</p>
<p class="lead">Call to action</p>
</div>
<div class="col-md-5">
<div class="card shadow p-3">
<!--<img class="card-img-top rz-card-img-top" src="http://placehold.it/400x100" >-->
<div class="card-body">
<h5 class="card-title">Call to action</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<form method="post">
<div class="row mb-3 gx-2">
<div class="col-md-6">
<label class="form-label"
>First Name <span>*</span></label
>
<input
type="text"
name="firstname"
class="form-control"
value="##firstname##"
required
/>
<small
class="form-text"
>This field is required.</small
>
</div>
<div class="col-md-6">
<label class="form-label"
>Last Name <span>*</span></label
>
<input
type="text"
name="lastname"
class="form-control"
value="##lastname##"
required
/>
<small
class="form-text"
>This field is required.</small
>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label class="form-label"
>Email Address <span>*</span></label
>
<input
type="text"
name="email"
class="form-control"
value="##email##"
required
/>
<small
class="form-text"
>This field is required.</small
>
<small
class="form-text"
>Doesn't look like a valid email address!</small
>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label class="form-label">Phone </label>
<input
type="text"
name="phone"
class="form-control"
value="##phone##"
/>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label class="form-label">Street Address </label>
<input
type="text"
name="address1"
class="form-control"
value="##address##"
/>
</div>
</div>
<div class="row mb-3 gx-2">
<div class="col-md-5">
<label class="form-label">City</label>
<input
type="text"
name="city"
class="form-control"
value="##city##"
/>
</div>
<div class="col-md-3">
<label class="form-label">State</label>
<select
name="state"
class="form-select"
>
<option value="##state##" selected="selected">##state##</option>
<option
value="state"
>
state
</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label">Zip Code</label>
<input
type="text"
name="zip"
class="form-control"
value="##zip##"
/>
</div>
</div>
<div class="row mb-3">
<div class="col">
<div class="form-check">
<input type="checkbox" class="form-check-input" value=""/>
<label class="form-check-label">Check me out</label>
</div>
</div>
</div>
<!-- PURL specific hidden inputs here -->
<input
type="hidden"
name=""
value=""
/>
<!-- /PURL specific hidden inputs here -->
<button
type="submit"
class="btn btn-primary"
>
Submit
</button>
<div><small class="form-text text-muted">
<em
>* Denotes a required field. <br />
Answer all required fields to submit the form.</em
>
</small></div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /MAIN CONTENT -->
<!-- FOOTER -->
<footer class="footer mt-auto py-3 bg-light text-center">
<div class="container">
<span class="text-muted">© currentYear |
<a href="##URL_PRIVACY##">Privacy Policy</a> |
<a href="##URL_LEGAL##">Legal</span>
</div>
</footer>
<!-- /FOOTER -->
<!-- BOOTSTRAP JS -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"
></script>
<!-- /BOOTSTRAP JS -->
<!-- VUE APP CODE -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.11"></script>
<script>
const Main =
data()
return
currentYear: new Date().getFullYear()
Vue.createApp(Main).mount('#awApp')
</script>
<!-- /VUE APP CODE-->
</body>
</html>【问题讨论】：
【参考方案1】：-
您的 Vue 脚本在您的模板中，这会引发错误。
你shouldn't bind to body in Vue。
使用 Vue，需要绑定 img src。简写为
:src
HTML img 标记上的width 属性不应使用 px。与 CSS 宽度不太一样。
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
<style>
main>.container
padding: 60px 15px 0;
.bd-placeholder-img
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
@media (min-width: 768px)
.bd-placeholder-img-lg
font-size: 3.5rem;
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.11"></script>
</head>
<body class="d-flex flex-column h-100 ">
<div id="app">
<h2>test</h2>
<div class="container">
<a class="navbar-brand">
<img :src="imgSrc" />
</a>
</div>
</div>
</body>
<script>
const app = Vue.createApp(
// instead of mount, u could use this: // el: '#app',
data()
return
currentYear: new Date().getFullYear(),
imgSrc: 'https://www.mindfire.agency/static/images/mindfire-agency-logo.png'
)
app.mount('#app')
</script>【讨论】：
谢谢@JohnVandivier！这是清晰、简洁且易于理解的。信息也很丰富！以上是关于将 Vue.js id 应用于正文时，标题中的徽标不可见的主要内容，如果未能解决你的问题，请参考以下文章
当在 vue.js 中的特定卡片上发生点击功能时，如何应用基于书籍 ID 或卡片 ID 的样式？
如何在 Vue.js 中使用 rowspan 将指针事件应用于简单表？
如何将点击卡片的 id 和卡片内容传递给 vue.js 中的另一个组件？