Vue中设置class类样式

最新推荐文章于 2024-03-14 15:20:36 发布
最新推荐文章于 2024-03-14 15:20:36 发布
阅读量9.6k 收藏 17
点赞数 5
分类专栏： Vue.js 文章标签： vue.js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39055970/article/details/106304711
版权

vue中通过属性绑定为元素设置class类样式

vue中class类样式的4种绑定方式

1、数组

<h1 :class="['thin','red','italic','active']">你看这个碗，他又大又圆！</h1>

实例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
    <style>
        .red {
            color: red;
        }

        .thin {
            font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            letter-spacing: 0.5em;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1 :class="['thin','red','italic','active']">你看这个碗，他又大又圆！</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isActive: false
            },
            methods: {

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

</html>

在这里插入图片描述
可以发现:class="[‘thin’,‘red’,‘italic’,‘active’]"的写法和class="thin red italic active"的效果时一样的，甚至更加繁琐。

2、三元表达式

<h1 :class="['thin','red','italic',isActive?'active':'']">你看这个碗，他又大又圆！</h1>

实例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
    <style>
        .red {
            color: red;
        }

        .thin {
            font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            letter-spacing: 0.5em;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1 :class="['thin','red','italic',isActive?'active':'']">你看这个碗，他又大又圆！</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isActive: false
            },
            methods: {

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

</html>

在这里插入图片描述
可以看出在数组的基础上可以添加三元表达式，类的存在和data中数据的true/false进行绑定，从这个角度上来说，使用数组的方式虽然繁琐，但是功能还可以接受。

3、数组嵌套对象

<h1 :class="['thin','red','italic',{'active':isActive}]">你看这个碗，他又大又圆！</h1>

实例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
    <style>
        .red {
            color: red;
        }

        .thin {
            font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            letter-spacing: 0.5em;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1 :class="['thin','red','italic',{'active':isActive}]">你看这个碗，他又大又圆！</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isActive: false
            },
            methods: {

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

</html>

在这里插入图片描述
可以看出，在数组中嵌套对象和三元表达式的方法区别不大，使用的符号更多，更不利于记忆，但是方便阅读。

4、直接使用对象

<h1 :class="{red:false, italic:true, active:true,thin:true}">你看这个碗，他又大又圆！</h1>

实例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
    <style>
        .red {
            color: red;
        }

        .thin {
            font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            letter-spacing: 0.5em;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1 :class="{red:false, italic:true, active:true,thin:true}">你看这个碗，他又大又圆！</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isActive: false,
                classObj: {}
            },
            methods: {

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

</html>

在这里插入图片描述
可以看出，直接使用对象的方式，每个类都要判断false/true，代码量很大，但是阅读起来最直观，并且可以将对象放到data中。

<body>
    <div id="app">
        <h1 :class="classObj">你看这个碗，他又大又圆！</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isActive: false,
                classObj: {
                    red: false,
                    italic: true,
                    active: true,
                    thin: true
                }
            },
            methods: {

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

综上所述，从可读性和操作行的角度上来说，更加推荐直接使用对象的方式进行class类样式的设置。如果class类不经常变化，没有必要使用Vue通过属性绑定为元素设置class类样式的方式进行样式设置。

Sheldon一蓑烟雨任平生
关注
  • 5
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
vue改class_Vue-进阶构造属性
weixin_42495394的博客
01-03 227
自定义指令第一种写法：声明一个全局指令//声明一个全局指令v-x，在任何组件都可以使用 //第一个参数是名字，第二个参数是选项 Vue.directive('x',directiveOptions)举例：//注意，这个后面没有s Vue.directive('x',{ inserted:function(el){ //点击元素之后，打印x el.addEventListener...
VUE中自定义枚举类
最新发布
m0_67116598的博客
06-11 1684
在项目的utils中新建一个文件Enum.js,在里面复制一下代码/*** 枚举类* @example* { key: 'STEP1', name: '步骤1', value: 1 },* { key: 'SETP2', name: '步骤2', value: 2 },* ]);* @method get(value) 通过value获取当前列的值* return { key: 'SETP2', name: '步骤2', value: 2 }* {* }*//*** 初始化*/
Vue中使用 class 类样式的方式
最爱喝怡宝的博客
11-20 6905
在vue中为我们提供了 几种方式来使用class类的样式
vue动态设置class样式
ssjjrr的博客
10-06 1661
vue动态设置class样式
Vue动态设置class的方式
weixin_46266464的博客
03-14 1392
通过以上这些方式，Vue 能够实现类名根据组件内部状态的变化而动态地添加、删除，从而控制元素样式变化。
Vue中动态绑定class样式
RayShyy的博客
10-19 7428
绑定的样式个数不确定（可以添加或删除任意一个class），名字也不确定。要绑定的样式个数确定，名字也确定，但是要动态决定是否使用。一个元素绑定多个class，点击添加或删除class。有两个class样式，第一个使用，第二个不使用。样式的类名不确定，需要动态指定。点击一个元素更改其绑定的类名。
vue给指定class设置css样式_Vue中Class与Style绑定
weixin_39946996的博客
01-15 1812
操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以使用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过拼接字符串比较麻烦，因此在v-bind用于class和style时，vue做了专门的增强，表达式结果的类型除了字符串之外，还可以是对象和数组。绑定HTML Class(1) 对象语法可以给v-bind:class一个对象，以动态切换class...
Vue中使用 class 类样式的方法详情
JackChan
03-02 614
Vue中使用 class 类样式的方法详情
vue给指定class设置css样式_vue通过style或者class改变样式
weixin_39851408的博客
12-19 4418
vue通过style或者class改变样式的实例代码通过style改变样式通过className改变样式​v-bind:class="{ active: isActive, 'text-danger': hasError }">data: {isActive: true,hasError: false}.active{...}.text-danger{...}PS：下面看下Vue的一些样式(...
vue给指定class设置css样式_Vue.js 样式绑定
weixin_39853210的博客
12-19 2088
样式操作整理。基本涵盖了全部var myvue = new Vue({el:'#mydiv',data:{gettext: '',getclass1:true,getclass2:false,getp_style:true,// 这里的key是类名，value是boolean值。下面的vue+class的value才是类名，key是自定义的类的实例化对象。注意区分styleobj:{class1:...
在vue中动态添加class类进行显示隐藏实例
10-16
在Vue.js框架中，动态添加和移除class是常见的需求，尤其在控制元素的显示与隐藏时。在本文中，我们将深入探讨如何在Vue中利用动态class实现元素的显示和隐藏，结合提供的代码实例进行详细解析。 首先，我们需要...
vue中动态添加class类名的方法
10-18
在Vue.js中，动态添加class类名是一种非常实用的功能，它允许我们在运行时根据组件的状态或数据来改变元素的样式。下面将详细讲解在Vue中动态添加class类名的几种常见方法。 ### 1. 对象形式 Vue允许我们使用一个...
Vue 实现v-for循环的时候更改 class的样式名称
10-15
在Vue.js中，当需要在`v-for`循环中为每个元素动态地更改CSS类时，我们可以利用`v-bind:class`指令。`v-bind:class`允许我们根据数据动态地绑定一个或多个类。这里我们将详细讲解如何实现这个功能，并提供一个实例来...
Vue点击切换Class变化,实现Active当前样式操作
10-15
在Vue.js中，点击切换Class并实现Active当前样式操作是一种常见的需求，特别是在构建交互式的用户界面时。Vue提供了数据绑定和事件监听等机制，使得我们可以轻松地实现这样的功能。以下是一个详细的步骤说明： 1. *...
v-for的四种使用方式
热门推荐
qq_39055970的博客
05-23 2万+
v-for的四种使用方式v-for的四种使用方式1、数组2、在对象数组3、对象4、迭代数字总结 v-for的四种使用方式 1、数组 在Vue中使用v-for遍历数组时v-for最常见的一种使用方式。 （1）先在data中定义数组 arr: [1, 2, 3, 4, 5], （2）在标签中遍历 <p v-for="(item,index) in arr">数值：{{item}}，索引：{{index}}</p> 2、在对象数组 对象数组，其实说到底也是数组，使用方式上和数组一模一
Vue.js中的v-model指令（双向绑定）
qq_39055970的博客
05-16 9051
Vue.js中v-model的作用v-model的作用和使用场景1.v-model的作用--双向绑定2.v-model双向绑定的使用场景——表单3.总结 v-model的作用和使用场景 你好！Vue.js作为现在最为常用的前端框架之一，经常会使用到“双向绑定”这一概念。今天我们就对Vue中的“双向绑定”这一核心特性进行一个简单的说明。 1.v-model的作用–双向绑定 单向绑定 ，非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。 双向绑定，
安装Vue.js devtools问题的终极解决方案（顶上去，兄弟们）
qq_39055970的博客
05-24 7115
安装Vue.js devtools问题的终极解决方案几年前的安装步骤（现在有问题）安装Vue.js devtools遇到的问题和解决方案1、版本问题2、node_modules missing3、安装完成后devtool图标还是灰色的或者控制台根本就没有vue 几年前的安装步骤（现在有问题） 相信大部分童鞋在网上找到的都是这几个步骤 （1）下载chrome扩展插件。 在github上下载压缩包并解压到本地，github下载地址：https://github.com/vuejs/vue-devtools （2
如何写一个vue组件发布到npm，包教包会，保姆级教学
qq_39055970的博客
12-04 6698
如何写一个简单的组件发布到npm前言1.前期准备——创建一个vue项目 前言 因为本章内容主要是说明如何将组件发布到npm的步骤，所以创建的组件相当简单，并不会涉及到其他的诸如ElementUI或者Ant Design Vue之类的UI组件库。如果是涉及到如何创建一个自己的组件库或者基于其他的组件库创建的组件发布，这一部分的内容，我会放到该专题内容接下来的几篇文章进行详细说明。 1.前期准备——创建一个vue项目 使用vue create 项目名称命令创建一个基础的vue项目，因为是比较简单的演示，所以选择
Vue中使用render函数设置伪类样式
06-02
在 Vue 中，可以使用 `render` 函数设置伪类样式，具体实现如下： ```javascript export default { name: 'MyComponent', render(h) { return h('div', { class: 'my-class', style: { color: 'red', '&:...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sheldon一蓑烟雨任平生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值