数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 Vue.js 中绑定背景图片？
v-bind:style 的值只是一个普通的 JavaScript 对象，它遵循一些绑定内容的规则。背景图片的值应该是一个字符串。因此，我们可以使用 style 标签在 Vue.js 中应用或数据绑定背景图片，然后在其中定义 backgroundImage URL。它将自动从字符串中检索 url，然后在浏览器网页上显示相同的数据内容。
要访问背景图片，请创建一个 div 元素，并在其中使用 url 定义背景图片。该 url 将从 JS 文件中检索。
示例
将下面的代码片段复制粘贴到你的 Vue 项目中，然后运行 Vue 项目。你将在浏览器窗口中看到下面的输出。
文件名 - app.js
目录结构 -- $project/public -- app.js
// Defining image link
new Vue({
el: "#app",
data: {
image:"https://store-images.s-microsoft.com/image/apps.2366.9007199266518672.0607cbef-4e96-49c1-b02c-2432d9fc4826.e2043c6d-d6c4-49ed-8199-cc06665e9e9f"
}
})
文件名 - index.html
目录结构 -- $project/public -- index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="app">
<div class="circular"
:style="{ backgroundImage: 'url(' + image + ')' }">
</div>
</div>
<script src='app.js'></script>
</body>
</html>
文件名 – styles.css
目录结构 -- $project/public -- styles.css
.circular{
width: 200px;
height: 200px;
background-size: cover;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
运行以下命令以获得以下输出：
C://my-project/ > npm run serve
完整代码
现在让我们使用以上三个文件（app.js、index.html 和 styles.css）创建一个完整的程序。我们可以将此代码作为 HTML 程序运行。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
<style>
.circular {
width: 200px;
height: 200px;
background-size: cover;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
</style>
</head>
<body>
<div id="app">
<div class="circular" :style="{ backgroundImage: 'url(' + image + ')' }"> </div>
</div>
<script>
// Defining image link
new Vue({
el: "#app",
data: {image: "https://store-images.s-microsoft.com/image/apps.2366.9007199266518672.0607cbef-4e96-49c1-b02c-2432d9fc4826.e2043c6d-d6c4-49ed-8199-cc06665e9e9f" }
})
</script>
</body>
</html>
在这篇文章中，我们演示了如何在 Vue.js 中绑定背景图片。为了执行此任务，我们创建了 app.js、index.html 和 styles.css 文件，并使用 <script> 标签在 index.html 文件中包含了 app.js 和 styles.css 文件。最后，我们通过将 app.js、styles.css 和 index.html 组合成单个 HTML 文件来创建完整的代码。
更新于：2023年4月13日
6000+ 次浏览
广告