【Vue】class & style：Vue中的两种样式处理方法

最新推荐文章于 2024-05-07 02:40:52 发布

心。晴

最新推荐文章于 2024-05-07 02:40:52 发布

阅读量1k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/jingjing217/article/details/108255910

版权

class属性

1、基本的class使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }
        .big {
             font-weight: 50px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1 class="red big">vue中的样式处理</h1>
    </div>
</body>
</html>

在这里插入图片描述

2、Vue中class的使用

绑定数组

通过 v-bind 绑定数组， v-bind 可简写为 “：”。

<div id="app">
	<h1 v-bind:class="['red','big']">vue中的样式处理</h1>
</div>
<script>
	var vm = new Vue({
    	el:"#app",
    })
</script>

三目运算

在绑定的数组中我们可以通过三目运算来实现简单的逻辑。

<div id="app">
    <h1 v-bind:class="['red',flag?'big':'']">vue中的样式处理</h1>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:true
        }
    })
</script>

在这里插入图片描述

数组中使用对象

上面例子中的三目运算符我们可以替换为对象，效果是一样的。

<div id="app">
    <h1 v-bind:class="['red',{'big':flag}]">vue中的样式处理</h1>
</div>

绑定对象

上面的例子都是将数据和view写在一起了，我们也可以直接将数据以对象的形式写在vm中。

<div id="app">
    <h1 v-bind:class="obj">vue中的样式处理</h1>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            obj:{red:true, big:true}
        }
    })
</script>

在这里插入图片描述

style属性

1、单个style引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1 :style="obj">这是一个h1</h1>  
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                obj: { color: 'red', fontSize: '50px' }
            },
        });
    </script>
  </body>
</html>

在这里插入图片描述

2、多个style引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1 :style="obj1">这是一个h1</h1> 
        <h2 :style="[ obj1, obj2 ]">这是一个h2</h2>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                obj1: { color: 'red', fontSize: '50px' },
                obj2: { fontStyle: 'italic' }
            },
        });
    </script>
</body>
</html>

在这里插入图片描述

心。晴

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue】class & style：Vue中的两种样式处理方法

class属性1、基本的class使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .red { color: red; } .big { font-weig
复制链接

扫一扫