Vue 第三讲（v-bind 属性）

最新推荐文章于 2024-07-09 14:37:50 发布

是我来晚了！

最新推荐文章于 2024-07-09 14:37:50 发布

阅读量576

点赞数 1

分类专栏：前端文章标签： vue javascript css html js

本文链接：https://blog.csdn.net/weixin_51927215/article/details/116335532

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

Vue

类属性
样式属性

类属性

v-bind:class 属性绑定单个类

使用 CSS 样式定义类（class_one）颜色为（blueviolet）
创建 Vue 对象，并在配置项（data）里面定义变量（classname）
将 Vue 中的变量（classname）的值属性（v-bind:class）传递给标签中的属性（class）中
特别注意：其中属性（v-bind: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>
    <script src="vue.js"></script>
    <style>
        .class_one{
            color:darksalmon;
        }
    </style>
</head>
<body>
    <div id="box">
        <h1 v-bind:class="classname">Hello SUSU</h1>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                classname:"class_one",
            },
        })
    </script>
</body>
</html>

在浏览器中打开

在这里插入图片描述
v-bind: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>
    <script src="vue.js"></script>
    <style>
        .class_one{
            color:darksalmon;
        }
        .class_two{
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <h1 v-bind:class="[classname1,classname2]">Hello SUSU</h1>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                classname1:"class_one",
                classname2:"class_two",
            },
        })
    </script>
</body>
</html>

在浏览器中打开

在这里插入图片描述
通过对象的方式绑定 class 属性

此处我们可以理解为 CSS 样式里面定义了二个类（class_one，class_two）
在 Vue 里面定义了二个变量（classname1，classname2），而且此处的变量是布尔值
v-bind:class 属性绑定的时候，语法 v-bind:class="{类1:变量1,类2:变量2}" ，实质上是借用变量的布尔值来判定类的属性是否应用在该标签上面

<!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>
    <script src="vue.js"></script>
    <style>
        .class_one{
            color:darksalmon;
        }
        .class_two{
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <h1 v-bind:class="{class_one:classname1,class_two:classname2}">Hello SUSU</h1>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                classname1:true,
                classname2:false,
            },
        })
    </script>
</body>
</html>

在浏览器中打开（此处变量1的布尔值为真，故只绑定了类1在标签上）

在这里插入图片描述

样式属性

v-bind:style 属性绑定单个样式

v-bind:style 属性绑定样式的时候，需要指定该变量对应的样式名
有二种指定方式，分别是在标签中指定和在定义变量的同时指定
v-bind:style="{'color':color1}" 在标签中指定
color2:{color:"pink"} 在定义变量的同时指定

<!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>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        <h1 v-bind:style="{'color':color1}">Hello SUSU</h1>
        <h1 v-bind:style="color2">Hello KEKE</h1>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                color1:"red",
                color2:{color:"pink"},
            },
        })
    </script>
</body>
</html>

在浏览器中打开

在这里插入图片描述
v-bind:style 属性绑定多个样式

通过数组传递多个参数

<!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>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        <h1 v-bind:style="[{'color':color1,'fontSize':fontsize1}]">Hello SUSU</h1>
        <h1 v-bind:style="[color2,fontsize2]">Hello KEKE</h1>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                color1:"pink",
                fontsize1:"99px",
                color2:{color:"red"},
                fontsize2:{fontSize:"66px"},
            },
        })
    </script>
</body>
</html>