Vue之class的

最新推荐文章于 2024-01-30 22:56:04 发布
最新推荐文章于 2024-01-30 22:56:04 发布
阅读量616 收藏
点赞数
分类专栏： vue.js 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaofei_liang/article/details/78073961
版权

Vue中class的使用总结如下：

使用形式v-bind:class  简写:class

1.在数组中使用一个class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                    color:'blue'
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :class="[color]">文字...</strong>
    </div>
</body>
</html>

描述：

1）

 a) <strong :class="[color]">文字...</strong>

 b) data:{
                    color:'blue'
                }

两者的color名称是对应一致的

    2)

a) data:{
                                color:'blue'
                         },

b) .blue{
            background: blue;
        }

两者的blue名称是对应一致的。

效果：


2.在数组中使用多个class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                    red:'red',
                    b:'blue'
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :class="[red,b]">文字...</strong>
    </div>
</body>
</html>

描述：

原理和上述使用一个数组一样。

结果：


3.使用对象形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :class="{red:true,blue:true}">文字...</strong>
    </div>
</body>
</html>


描述：

使用对象的形势的时候，<strong :class="{red:true,blue:true}">文字...</strong>,其中的red,blue都是class的名字，

和数组形势的时候不一样。当为true的时候，显示对应的样式，为false的时候，隐藏对应的样式。现在都是true，

所以文字颜色是红色。背景是

蓝色


结果：



4.使用对象形式。不同于上一个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                    a:true,
                    b:false
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :class="{red:a,blue:b}">文字...</strong>
    </div>
</body>
</html>

描述：

和第三种不同的是，使用了a,b两个变量，然后在data中设置a,b的布尔值，从而实现class的显示和隐藏。true

显示，false隐藏。


结果：

5.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                    json:{
                        red:true,
                        blue:true
                    }
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :class="json">文字...</strong>
    </div>
</body>
</html>

描述：

在:class处设置一个变量，在data中以对象的形势将class名称的布尔值写出来。

结果：

程序员库里
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于vue 里:class 的几种使用方式
datishi8133的博客
02-02 9770
最近一直在做vue项目 从网上搜索到的资料不太多。关于:class的使用 结合自己的实现 整理如下。接下来一篇写:style 。其实从:class 这里可以想到:style的使用 也是类似的 一 class 1 自定义class 通过vue computed 计算属性 实现 我的class 是名称+时间戳，是独一份的，可以作为id角色使用。 html: <div :cl...
vue3-class-component
04-08
2. **Composition API**：Vue 3 引入的主要特性之一，它允许开发者将组件的功能分解到可复用的函数中，提升了代码的模块化和可维护性。 3. **Class-Based Components**：Vue3-Class-Component 库实现了基于类的组件...
vue中动态添加class类名的方法
10-18
今天小编就为大家分享一篇vue中动态添加class类名的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue基础-Class介绍
weixin_43010844的博客
12-11 3664
数据绑定的一个常见需求场景是操纵元素的 CSS class 列表因为class是 attribute，我们可以和其他atribute 一样使用v-bind将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue专门为class的v-bind用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是或。
Vue.js学习 Item6 -- Class 与 样式绑定
小平果的欢乐谷
07-08 3513
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。绑定 HTML Class尽管可以用 Mustache 标签绑定
vue 绑定动态class变量
qq_35246952的博客
12-07 1419
第一种方式 <div :class="{'baseButton': true, [`${theme}`]: true}">111</div> *第二种方式 <div :class="['baseButton', `${theme}`]">111</div>
vue如何判断dom的class
08-27
Vue 中判断 DOM 的 class 在 Vue 中判断 DOM 的 class 是一个常见的需求，今天我们将通过一个实例来介绍如何判断 DOM 的 class。在这个实例中，我们将使用 Vue 框架来实现点击给 DOM 添加 class，然后获取含有 ...
vue添加class样式实例讲解
10-17
在本文里我们给大家整理了关于vue添加class样式实例，对此有兴趣的朋友们可以学习参考下。
在vue中动态添加class类进行显示隐藏实例
10-16
在Vue.js框架中，动态添加和移除class是常见的需求，尤其在控制元素的显示与隐藏时。在本文中，我们将深入探讨如何在Vue中利用动态class实现元素的显示和隐藏，结合提供的代码实例进行详细解析。 首先，我们需要...
vue class里面含有变量还有判断正确与否来显示的class
肖肖肖丽珠的博客
01-16 9103
class是变量。根据某个变量值而有不同的class &lt;div v-for="(item,key) in feelbar" :class="['showc'+(key+1),'showcAnimat'+(key+1)]"  &gt;                                &lt;span &gt;{{key+1}}&lt;/span&gt;             ...
vue class变量加载不同class
Bright2017的博客
11-01 723
vue语法中绑定Class时，用到对象语法 <div :class="['hide',{'show':item.staues=='0'}]"> 待付款 </div> <div :class="['hide',{'show':item.staues=='1'}]"> 已付款 </div> <div :class="['hide',{'sh...
vue通过响应式变量控制元素class名
weixin_45966674的博客
01-11 588
例如 此时我们data中有一个isApp变量 值为 true/false 我们希望 当isApp为true时 给div添加 类名 app 比较简单的写法就是 这样写看着比较捞 而且当你元素有很多类名时 就很不好用了我们可以这样写 看着就比较美观 而且最大的好处还是不影响其他类名因为在同一块元素上 v-bind:class 和 class并不冲突 完全可以一起用
vue中class名为变量的几种写法
xt_XiTu的博客
06-16 1万+
1、class名只有一个，只不过是变量 <template> <div :class="classname"></div> </template> <script> export default { data() { return { classname: 'haha' } } } </script> 2、通过对象形式 此种方式适合针对固定的class名，判断是否存在此class名称 <template&gt
vue中的 :class
热门推荐
CHunter1024的博客
08-28 2万+
vue中的 :class
5.Vue - 绑定class样式、style样式
weixin_51351637的博客
08-31 6405
绑定样式1.class样式写法：class=“xxx” xxx可以使字符串、对象、数组字符串法：适用于类名不确定，要动态获取对象法：适用于要绑定多个样式，个数不确定，名字不确定，但要动态决定用不用数组法： 适用于要绑定多个样式，个数确定，名字确定，但不确定用不用2.style样式：style=“{fontSize：xxx}” 其中xxx是动态值：style="[a,b]" 其中ab是样式对象，如下。...
VUE3 学习笔记（七）动态样式 class 实现
sensor_WU 博客
04-08 1万+
本文介绍了VUE中动态设置CSS和Style的方法。
vue 模板语法值class操作
最新发布
weixin_45782719的博客
01-30 589
在这种情况下，说哪个“优先级”更高可能不是完全准确的，因为它们控制的是不同元素的类。然而，如果是在相同的元素上同时使用这两种绑定方式，Vue会尽量合并这些绑定。所以，如果在同一元素上有冲突的情况，模板内直接定义的绑定方式在效果上相当于具有。)绑定的优先级问题，实际上在这种情况下，提到的“优先级”概念需要有所区分。标签的类始终不变（因为它是硬编码的，不会受到组件状态的影响）。)动态变化的，这意味着其实际的类绑定是依赖于组件状态（这里是。但直接在模板中定义的类的具体值（在这里是。类始终会被绑定到该元素上，而。
Vue中使用 class 类样式的方式
最爱喝怡宝的博客
11-20 6908
在vue中为我们提供了 几种方式来使用class类的样式
Vue.js绑定class属性
tanxinji的博客
12-25 3228
绑定class属性的格式是 v-bind:class = "语句", 可以缩写为 :class ="语句" 。class属性是可以有多个的，在" "内可以有多种不同的情况。 目录 一、" "内是vue对象内存在的对象 二、" " 内为 [ ] 数组 三、 " "内为 { } json对象 一、" "内是vue对象内存在的对象 :class = " 语句"， 语句中传入的是vue建立的变量，计算属性，函数等的时候，就会把v...
vue3 class
09-02
Vue 3 introduces a new way of creating components using the class syntax. With the class-based API, you can define your components as classes, which makes it easier to organize and reuse code. Here's ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值