Vue-绑定class样式

已于 2024-05-15 18:05:08 修改
阅读量195 收藏 1
点赞数 4
分类专栏： Vue 文章标签： vue.js
于 2024-05-15 18:02:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73839298/article/details/138917076
版权

什么绑定class样式？

在Vue.js中绑定class样式指的是将 HTML 元素的class属性与 Vue 实例的数据动态连接起来。绑定class样式是使用属性绑定指令v-bing来进行绑定，v-bing简为冒号（:），将数据绑定到HTML元素的属性上。

绑定class样式（简单写法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="icon" href="img/network.png" type="image/x-icon">
    <script src="js/Vue.js"></script>
    <!-- 引入Vue.js文件 -->
    <style>
        .basic {
            width: 200px;
            height: 100px;
            border: 1px solid black;

        }

        .happy {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: red;
        }

        .sad {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: blue;
        }

        .normal {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: yellow;
        }
    </style>
</head>
<body>

    <div id="root">
        <div class="basic" :class="mood" @click="changeMood()">{{name}}</div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        //阻止Vue在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                name: 'Hello World!',
                mood: 'normal'
            },
            methods: {
                changeMood() {
                    this.mood = 'happy'
                }
            },
        })
    </script>

</body>
</html>

绑定class样式（字符串写法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="icon" href="img/network.png" type="image/x-icon">
    <script src="js/Vue.js"></script>
    <!-- 引入Vue.js文件 -->
    <style>
        .basic {
            width: 200px;
            height: 100px;
            border: 1px solid black;

        }

        .happy {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: red;
        }

        .sad {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: blue;
        }

        .normal {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: yellow;
        }
    </style>
</head>
<body>

    <div id="root">
        <div class="basic" :class="mood" @click="changeMood()">{{name}}</div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        //阻止Vue在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                name: 'Hello World!',
                mood: 'normal'
            },
            methods: {
                changeMood() {
                    const array = ['happy', 'sad', 'normal']
                    // 使用声明常量的关键字(const)定义一个常量名为(array)的数组[],数组里面包含三个字符串元素('happy', 'sad', 'normal')
                    const index = Math.floor(Math.random() * 3)
                    //Math.random()方法：生成0~1的随机数,注意生成的随机数包含0不包含1,生成的随机数是伪随机浮点数
                    //Math.floor()方法：取整
                    this.mood = array[index]
                }
            },
        })
    </script>

</body>
</html>
<!-- 
    绑定class样式：字符串写法


    小知识：
            1. const 是一个声明常量的关键字，常量的值初始化后不可修改
            2. 常量的名字是自定义的
            3. 方括号是代表数组
-->

 绑定class样式（数组写法）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="js/Vue.js"></script>
    <!-- 引入Vue.js文件 -->
    <style>
        .basic {
            width: 200px;
            height: 100px;
            border: 1px solid black;

        }

        .happy {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: red;
        }

        .sad {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: blue;
        }

        .normal {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: yellow;
        }

        .apk1 {
            text-align: center;
        }

        .apk2 {
            text-shadow: 1px 1px 0 teal;
        }

        .apk3 {
            border-radius: 50px;
        }
    </style>
</head>

<body>

    <div id="root">
        <div class="basic" :class="Array">Hello {{name}}</div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        //阻止Vue在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                name: 'World!',
                mood: 'normal',
                Array: ['apk1', 'apk2', 'apk3']
            },
        })
    </script>

</body>

</html>
<!-- 
     绑定class样式：数组写法
-->

 绑定class样式（对象式写法）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="js/Vue.js"></script>
    <!-- 引入Vue.js文件 -->
    <style>
        .basic {
            width: 200px;
            height: 100px;
            border: 1px solid black;

        }

        .happy {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: red;
        }

        .sad {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: blue;
        }

        .normal {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            background-color: yellow;
        }

        .apk1 {
            text-align: center;
        }

        .apk2 {
            text-shadow: 1px 1px 0 teal;
        }

        .apk3 {
            border-radius: 50px;
        }
    </style>
</head>

<body>

    <div id="root">
        <div class="basic" :class="classObject">Hello {{name}}</div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        //阻止Vue在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                name: 'World!',
                mood: 'normal',
                classObject: {
                    apk1: false,
                    apk2: false
                }
            },
        })
    </script>

</body>

</html>
<!-- 
     绑定class样式：对象式写法
-->

Jealous_-
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue绑定class样式
weixin_46030955的博客
03-22 140
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <style> .demo{ width: 100px; height: 100.
vue绑定class与行间样式style详解
08-29
Vue 绑定 Class 与行间样式 Style 详解 Vue 是一个流行的前端框架，提供了强大的绑定机制来控制 HTML 元素的样式。今天，我们将详细介绍 Vue 绑定 Class 与行间样式 Style 的相关知识点。 绑定 Class 在 Vue 中，...
vue-绑定class样式
景月娇-Kathy
04-07 221
1、数组语法 我们可以借助于v-bind指令来实现： HTML： <div id="app"> <div v-bind:class="activeClass"></div> <div v-bind:class="errorClass"></div> <div v-bind:class="[activeClas...
Vue 绑定样式（class)
半夏_2021的博客
06-16 438
Vue 绑定样式（class)
Vue系列教程（九）属性绑定为元素设置class类样式
Hit the keyboard hard
02-12 392
Vue中为页面设置样式的方式有两种，class方式和style方式。 这篇博客介绍class方式： 首先回顾我们不适用Vue的时候设置class的方式： <style> .red { color: red; } .thin { font-weight: 200; } </style> <h1 clas...
Vue中动态绑定class样式
RayShyy的博客
10-19 7317
绑定的样式个数不确定（可以添加或删除任意一个class），名字也不确定。要绑定的样式个数确定，名字也确定，但是要动态决定是否使用。一个元素绑定多个class，点击添加或删除class。有两个class样式，第一个使用，第二个不使用。样式的类名不确定，需要动态指定。点击一个元素更改其绑定的类名。
Vue v-bind动态绑定class实例方法
10-15
总的来说，Vue的`v-bind`指令配合`class`和`style`属性，提供了强大的灵活性，使我们能够在运行时根据应用程序的状态轻松地更新元素的样式。这极大地提高了用户体验，因为样式可以随着数据的变化实时更新。
vue动态绑定class的几种常用方式小结
10-16
在Vue.js中，动态绑定`class`是一种常见且强大的特性，允许我们根据组件的状态或数据来改变元素的样式。本文将详细讲解Vue中几种常用的动态绑定`class`的方法。 1. **对象方法** - **基础绑定**：最简单的方式是...
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
10-15
总的来说，解决`vue-quill-editor`的图标样式排布错乱问题，主要是通过正确引入和应用Quill的CSS样式，以及合理配置组件的类名。同时，根据项目需求定制工具栏和事件监听，可以进一步提升用户体验。在使用`vue-quill...
Vue动态样式绑定
月光晒了很凉快的博客
09-03 6774
以数组方式添加 class 动态绑定，更适合追加新的属性。也就是说，一般对于追加新样式，我们使用数组方式进行动态绑定。
vue动态绑定样式 动态绑定class & style
贩梦的博客
04-19 4386
一、动态绑定class 1.判断是否绑定一个类名 2.判断是否绑定一个active 3. 判断绑定多个 4. 把需要绑定的类名储存到data中 5.三元判断 6.动态静态结合 # 完整代码 二、动态绑定style写法 1.对象绑定 2.数组绑定 3. 三元运算符 4.绑定data对象 5. 动态静态结合 # 完整代码
vue动态绑定class
Mahuicool的博客
02-28 1955
在vue框架开发中，有时候我们需要对元素的样式进行动态控制，比如tab按钮的切换。我们可以通过vue指令v-bind对元素的class进行动态控制。控制方式有对象和数组两种。
vue 动态样式绑定 class/style
weixin_57742734的博客
08-31 7847
vue 动态样式绑定
5.Vue - 绑定class样式、style样式
weixin_51351637的博客
08-31 6119
绑定样式1.class样式写法：class=“xxx” xxx可以使字符串、对象、数组字符串法：适用于类名不确定，要动态获取对象法：适用于要绑定多个样式，个数不确定，名字不确定，但要动态决定用不用数组法： 适用于要绑定多个样式，个数确定，名字确定，但不确定用不用2.style样式：style=“{fontSize：xxx}” 其中xxx是动态值：style="[a,b]" 其中ab是样式对象，如下。...
vue动态绑定class、style的几种方法
weixin_43534452的博客
06-28 7925
vue动态绑定样式
Vue（三）：样式绑定、条件渲染、列表渲染、列表过滤与列表排序
m0_73560798的博客
03-11 905
绑定样式：1.class样式写法：class="xxx”xxx可以是字符串、对象、数组。字符串写法适用于：类名不确定，要动态获取。对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。2.style样式:style="{fontSize:xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。1、用于展示列表数据。
Vue动态绑定Class与Style
最新发布
长沙火山
03-17 2772
这样可以根据数据的变化来动态改变元素的样式，实现更灵活的样式控制。通过数组语法，可以根据多个条件的组合来决定元素应该添加哪些类，实现更复杂的样式控制。通过数组语法，可以根据多个条件的组合来决定元素应该具有哪些样式，实现更灵活的样式控制。这样，我们可以根据多个条件的组合来动态控制元素的样式，使页面更具交互性和灵活性。数组语法，可以实现更复杂的样式控制，根据多个条件的组合来动态改变元素的样式，满足不同的需求。通过数组语法，可以根据多个条件的组合来动态控制元素的样式，实现更灵活的样式控制。
Vue动态绑定Class常用的几种方式
热门推荐
丑小喵的博客
10-20 1万+
总结Vue动态绑定Class常用的几种方式
vue 动态绑定class
09-14
在Vue中，动态绑定class有多种方法。第一种方法是使用对象语法，可以根据条件来动态地添加或删除class。例如，可以使用`v-bind:class`指令在`<div>`元素上绑定一个对象，对象中的属性名对应要绑定的class名，属性值...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值