头歌（Educoder）——Vue基础——Vue3 Class 与 Style 绑定

最新推荐文章于 2025-10-29 11:14:49 发布

原创

最新推荐文章于 2025-10-29 11:14:49 发布 · 1.5k 阅读

CC 4.0 BY-SA版权

文章标签：

本关任务：完成新浪导航栏绑定内联样式。

为了完成本关任务，你需要掌握： 1.绑定 HTML class， 2.绑定内联样式。

我们可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class：

如下实例：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>.ace6f8a6f-97ff-4ca2-886d-1a8008f10b5f .active { width: 150px; height: 150px; content:url('https://data.educoder.nethttps://data.educoder.net/api/attachments/4329753?type=image/png'&t=a09Pb2hwUG1qb3NGSVlMMGxMWVQzano4YVFyWFF2Ylg4aUZVYk9mZzdJdz0=);</style>
<body>
<div id="app">
<div :class="{ 'active': isActive }"></div>
</div>
</body>
<script>
const { createApp } = Vue
const a=createApp({
data() {
return {
isActive: true,
}
},
}
);
a.mount('#app');
</script>

显示效果为：

上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值，若为真，图片成功显示，假则不显示。

你可以在对象中写多个字段来操作多个 class。此外，:class 指令也可以和一般的 class attribute 共存。举例来说，下面这样的状态：

配合以下模板：

渲染的结果会是：

完整代码如下：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>.ace6f8a6f-97ff-4ca2-886d-1a8008f10b5f .static { width: 150px; height: 150px; }.ace6f8a6f-97ff-4ca2-886d-1a8008f10b5f .active{ content:url('https://data.educoder.nethttps://data.educoder.net/api/attachments/4329753?type=image/png'&t=a09Pb2hwUG1qb3NGSVlMMGxMWVQzano4YVFyWFF2Ylg4aUZVYk9mZzdJdz0=); }.ace6f8a6f-97ff-4ca2-886d-1a8008f10b5f .text-danger{ content:url('https://data.educoder.nethttps://data.educoder.net/api/attachments/4329890?type=image/png'&t=ZzNpTHpQSm55a1hjSnpvY2x0cGEwYUM2NlNrcEM4cE9NQVZPUUp6SnltND0=); </style>
<body>
<div id="app">
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
</div>
</body>
<script>
const { createApp } = Vue
const a=createApp({