Vue学习:绑定样式 ：class

最新推荐文章于 2024-04-11 16:42:01 发布
最新推荐文章于 2024-04-11 16:42:01 发布
阅读量160 收藏
点赞数
分类专栏： Vue 文章标签： vue.js Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47295886/article/details/128938562
版权
文章介绍了在Vue.js中如何动态地绑定class样式，包括使用字符串写法根据变量切换样式，使用数组写法随机选取样式，以及使用对象写法动态决定样式是否应用。示例代码展示了如何在点击事件中改变元素的样式类名。
摘要由CSDN通过智能技术生成

:class-绑定class样式，字符串写法——适用于样式的类名不确定需要动态指定

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
        /* 下面是任选一个不可以重复 */
        .happy{
           
            border: 1px solid red;
            background-image: linear-gradient(to bottom  left,yellow , pink,orange,yellow);
        }
        .sad{ 
            border: 1px dashed green;
            background-color: gainsboro;
            
        }
        .normal{
           
            border: 1px solid teal;
            background-color: burlywood;
            
        }
        
        /* 可以同时选择 */
        .a1{ 
            background-color: greenyellow;
        }
        .a2{ 
            font-size: 30px;
            text-shadow: 2px 2px 10px red;
        }
        
        .a3{ 
           border-radius: 20px;
        }
        
        
    </style>
    <script type="text/javascript" src="./js引入/测试版本/vue.js"></script>
</head>
<body>
    <!-- 准备容器 -->
    <div id='root'>
        <!-- 变化的样式使用绑定书写 -->
        <div class="basic" :class="a" @click="changeMod">{{name}}</div>
    </div>
    <script>
        const vm=new Vue({
            el: '#root',
            data:{//属性
                name:"me",
                a:'normal'//变量是字符串适用于样式的类名不确定需要动态指定

           },
           methods: {
            changeMod(){
                this.a='happy'

            }
           },
            
            
        });
    </script>
</body>

</html>
需要进行样式的随机选取
           methods: {
            changeMod(){
                
                //this.a='happy'
                //不仅仅是happy样式其他样式也要 准备数组
                const arr=['happy','sad','normal']
                //使用索引取东西，生成随机数
                const index = Math.floor(Math.random()*3)//永远不可能取值03 所以需要取整
                this.a=arr[index]

            }
           },

:class-绑定class样式，数组写法——适用于要绑定多个样式，个数不确定，名字也不确定 

    <!-- 准备容器 -->
    <div id='root'>
        <!-- 变化的样式使用绑定书写 -->
        <div class="basic" :class="a" @click="changeMod">{{name}}</div>
        <br>
        <div class="basic" :class="arr" @click="changeMod">{{name}}</div>
    </div>
    <script>
        const vm=new Vue({
            el: '#root',
            data:{//属性
                a:'normal',//变量是字符串适用于样式的类名不确定需要动态指定
                arr:['a1','a2','a3']
           },

也可直接写：使用表达式，但是Vue不帮你管理了

这里面的是值：使用引号

<div class="basic" :class="[a,b,c]" @click="changeMod" >{{name}}</div>

所以应该写成：不加引号是寻找变量（比较麻烦）

        const vm = new Vue({
            el: '#root',
            data: {//属性
                name: "hello",
                a: 'normal',//变量是字符串适用于样式的类名不确定需要动态指定
               // arr: ['a1', 'a2', 'a3'],
                a:'a1',
                b:'a2',
                c:'a3'
            },

对象写法适用于：要绑定的样式，个数确定，名字也确定，但是动态决定用不用

   <!-- 对象写法适用于：要绑定的样式，个数确定，名字也确定，但是动态决定用不用 -->
        <div class="basic" :class="classobj" @click="changeMod">{{name}}</div>
     const vm = new Vue({
            el: '#root',
            data: {//属性
                name: "hello",
                a: 'normal',//变量是字符串适用于样式的类名不确定需要动态指定
                arr: ['a1', 'a2', 'a3'],
                // a:'a1',
                // b:'a2',
                // c:'a3',
                classobj:{
                    a1:false,//这个样式没有
                    a1:true,//这个样式有
                }


            },

同样可以简写成为

      <div class="basic" :class="{a1:'ture',a2:'true'}">{{name}}</div>

但是不好配置，同样可以使用变量进行管理。但是更麻烦了

¡Venceremo
关注
专栏目录
Vue3-06-样式绑定-class绑定的写法总结
northcastle的博客
12-12 2076
Vue3 中使用 class 实现样式绑定
22.Vue绑定class样式
爱米酱的博客
06-17 1004
为了讲好class样式，我们这里提前准备了7个样式作为例子来讲解。 basic就是最基本的边框。happy,sad,normal代表了3种心情，这三种心情在设置的时候需要3选一。这三个不能同时应用。而add1,add2,add3是可以同时使用的咱们先看看这两部分样式的效果：互斥部分：兼容部分：讲到这里7个样式我们就说完了，接下来我们就操作一下。需求1：basic是基础的，点击div将样式从normal切换为happy这个时候有人就会想这样去实现，给这个div绑定点击事件，在事件中根据这个div的id获
Class 与 Style 绑定内联样式(vue.js)
时光足迹
10-08 2729
v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）： data: { styleObject: { color: 'red', fontSize: '13px' } }
vue 多个class属性_vue动态绑定多个样式
weixin_36274355的博客
01-12 2790
vue动态绑定多个样式在项目开发的过程中遇到这样一个需求：有一个节点的状态的显示，使用了element的时间线的组件，但是这个节点的状态有十几种，不同的状态有不同的显示方式，也就是说动态绑定样式。1、一开始的想法这原本不复杂，但是由于样式太多(十几种)，一堆都写在标签内的话，代码非常的不美观，因此想用一个好一点的方式去实现。使用:style="{color:item.color}"遍历的方法动态的...
[vue] Vue绑定class样式
qq_14993591的博客
11-03 535
1. class样式 写法:class=“xxx” xxx可以是字符串、对象、数组。 字符串写法适用于：类名不确定，要动态获取。 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。 字符串写法适用于：类名不确定，要动态获取。 .basic{ width: 400px; height: 100px; border: 1px solid black; } .happy{ border: 4px solid red;;
动态添加类名几种方法
weixin_42575028的博客
09-28 4381
<template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名， 第二个参数：boolean值 --> <!-- 对象的形式: 用花括号包裹起来，类名用引号， --&gt...
Vue中使用v-bind:class动态绑定多个类名
码农键盘上的梦
08-14 2072
在上述代码中，我们设置了一个类名为container的主容器元素，然后将三个样式类名（color、size和font）用数组的形式统一传递给了v-bind:class指令。在Vue.js开发中，经常需要动态绑定HTML元素的class（类名）属性，以改变元素的外观和行为。在Vue中，我们可以使用v-bind:class指令动态绑定HTML元素的class属性。具体说来，v-bind:class可以接受一个对象作为参数，在这个对象中，每个属性的键名表示一个类名，键值表示该类名是否被应用到元素上。
如何在 vue 中绑定 class 样式？
weixin_44616020的博客
03-02 398
可以是一个计算属性，或者是一个返回数组或对象的方法，来动态地生成 class 名称。可以传递一个数组，数组的每一项都是一个 class 名称。可以传递一个对象，对象的属性名是 class 名称，属性值为。指令来动态绑定 class 样式。，用来控制是否应用该 class。的值不为空，也将应用该 class。为 true，该元素将应用名为。为 true，该元素将应用名为。在 Vue 中可以通过。在上面的例子中，如果。在上面的例子中，如果。
快速解决vue动态绑定多个class的官方实例语法无效的问题
10-18
在使用Vue.js框架进行Web开发时，动态绑定DOM元素的class属性是一项基础且实用的技术。开发者可以通过class绑定来根据不同的条件为元素动态添加或移除样式类，从而实现丰富的交互效果。不过，在实际开发过程中，...
vue-绑定class样式
景月娇-Kathy
04-07 248
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类样式
qq_39055970的博客
05-23 9714
vue中通过属性绑定为元素设置class类样式vue中class类样式的4种绑定方式1、数组2、三元表达式3、数组嵌套对象4、直接使用对象 vue中class类样式的4种绑定方式 1、数组 <h1 :class="['thin','red','italic','active']">你看这个碗，他又大又圆！</h1> 实例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charse
Vue绑定Class样式
小认真靖哥哥的博客
09-26 725
Vue绑定Class样式
前端应用_Vue_通过属性绑定为元素设置class类样式（介绍四种方法，用哪个随你）
上海 彭彭
08-06 1299
属性绑定 用 v-bind , 如果想引用 class 样式， 如果没有这节知识，恐怕你要抓头挠腮 了. 这个节不用介绍多就介绍四种方法，实际原理差不多， 如果不用属性绑定 我们取值 是这样的， 示例代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
5.Vue - 绑定class样式、style样式
weixin_51351637的博客
08-31 6902
绑定样式1.class样式写法：class=“xxx” xxx可以使字符串、对象、数组字符串法：适用于类名不确定，要动态获取对象法：适用于要绑定多个样式，个数不确定，名字不确定，但要动态决定用不用数组法： 适用于要绑定多个样式，个数确定，名字确定，但不确定用不用2.style样式：style=“{fontSize：xxx}” 其中xxx是动态值：style="[a,b]" 其中ab是样式对象，如下。...
vue绑定class样式的方式
weixin_55532289的博客
08-01 836
vue绑定class样式的三种方式
vue 绑定 添加class 属性 4种方法 添加style 3中方法 v-bind
欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
08-06 9306
动态设置class样式
vue简单使用三（class样式绑定）
最新发布
weixin_41670405的博客
04-11 359
可以看到class中有两个值。style样式设置成功。
绑定class样式与绑定style样式、条件渲染、列表渲染、key作用与原理、列表过滤、列表排序——Vue
weixin_70320000的博客
12-06 1076
绑定class样式与绑定style样式、条件渲染、列表渲染、key作用与原理、列表过滤、列表排序
Vue 框架中 Class 绑定的三种形式
qq_52266105的博客
02-21 1523
该文章为笔记，教程为动力节点的老杜Vue视频教程，Vue2 Vue3实战精讲 视频链接：https://www.bilibili.com/video/BV17h41137i4?p=1&vd_source=2136c732ce8d5a3f412e2f7064285cb7
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值