绑定class和style的几种方式

最新推荐文章于 2024-05-26 19:20:24 发布

闲人不梦卿

最新推荐文章于 2024-05-26 19:20:24 发布

阅读量1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/atu1111/article/details/108018766

版权

vue 专栏收录该内容

53 篇文章 3 订阅

订阅专栏

绑定class和style的几种方式

1.绑定class的几种方式

1.1对象语法

给 v-bind:class 设置一个对象，可以动态地切换 clas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .active
        {
             background-color: aqua;
         }
    </style>
</head>
<body>
    <div id="app">
          <p v-bind:class = "{active:isActive}">AAAA</p>
    </div>

    <script src="vue.js">
    </script>
    <script >
        var app = new Vue({
           el : '#app',
           data : {isActive:true}
       })
       
    </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>Document</title>
    <style type="text/css">
        .active 
        {
             background-color: rgb(255, 0, 0);
             
         }
         .error
         {
            font-size: 80px;
         }
    </style>
</head>
<body>
    <div id="app">
          <p v-bind:class = "{active:isActive,error:isError}">AAAAAAAAAA</p>
    </div>

    <script src="vue.js">
    </script>
    <script >
        var app = new Vue({
           el : '#app',
           data : {isActive:true,isError:true}
       })
       
    </script>

    
</body>
</html>

在这里插入图片描述

上面渲染后的结果为：

<p class=”active error” ></p>

下面是改成计算属性的方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .active 
        {
             background-color: rgb(255, 0, 0);
             
         }
         .error
         {
            font-size: 80px;
         }
    </style>
</head>
<body>
    <div id="app">
          <p v-bind:class = "classes">AAAAAAAAAA</p>
    </div>

    <script src="vue.js">
    </script>
    <script >
        var app = new Vue({
           el : '#app',
           data : {isActive:true,isError:true},
           computed:{
               classes: function()
               {
                    var reuturnObj =
                    {
                        active:this.isActive,
                        error:this.isError
                    }
                    return reuturnObj;               
               }
           }

       })

       
    </script>

    
</body>
</html>

1.2.数组语法

当需要应用多个 class 时，可以使用数组语法，给：class 绑定一个数组，应用一个 class 列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .active 
        {
             background-color: rgb(255, 0, 0);
             
         }
         .error
         {
            font-size: 80px;
         }
    </style>
</head>
<body>
    <div id="app">
           <div :class="[actives, errors]">pppppppppppppp</p>
    </div>
     <script src="vue.js"></script>
     <script>
         var app = new Vue({
               el:"#app",
               data:{actives:"active",errors:"error"}
         })
     </script>
</body>
</html>

展示效果：
在这里插入图片描述

2.绑定style的几种方式

使用 v-bind:style （即：style）可以给元素绑定内联样式，方法与：class 类似，也有对象语法和数组语法，看起来很像直接在元素上写 CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div :style="styles">
            99999999
        </div>
    </div>
    <script src="vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                styles:
                {
                    fontSize:25+'px',
                    backgroundColor:"red"
                }
              
            }
        })
    </script>
</body>
</html>

展示效果

在这里插入图片描述

闲人不梦卿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
绑定class和style的几种方式

绑定class和style的几种方式1.绑定class的几种方式1.1对象语法给 v-bind:class 设置一个对象，可以动态地切换 clas<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
复制链接

扫一扫