vue学习 10vue-动态绑定CSS样式

最新推荐文章于 2024-03-05 11:23:29 发布

VIP文章扫地鼠Gordon

最新推荐文章于 2024-03-05 11:23:29 发布

阅读量355

点赞数

分类专栏： vue 文章标签： vue-动态绑定CSS样式

本文链接：https://blog.csdn.net/qq_28137309/article/details/89098488

版权

标签绑定class属性：v-bind:class="{changeColor: true}"

注意里面的写法是对象的形式

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <!-- vue-app是根容器 -->
    <div id="vue-app">
        <h1> 动态 CSS Class</h1>
        <h2>实例 1</h2>
        <div v-on:click="changeColor=!changeColor"  v-bind:class="{changeColor: changeColor}">
            <span> changeColor </span>
        </div>
        <h2>实例 2</h2>
        <button v-on:click="changeColor=!changeColor"> change color

最低0.47元/天解锁文章

优惠劵

扫地鼠Gordon

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习 10vue-动态绑定CSS样式

标签绑定class属性：v-bind:class="{changeColor: true}"注意里面的写法是对象的形式html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Vue.js</title&g...
复制链接

扫一扫