vue--绑定类名

最新推荐文章于 2024-05-16 15:32:30 发布

weixin_44889992

最新推荐文章于 2024-05-16 15:32:30 发布

阅读量809

点赞数 1

分类专栏： vue 文章标签： vue--绑定类名

本文链接：https://blog.csdn.net/weixin_44889992/article/details/89389614

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

class

为什么要绑定类名？

数据–驱动–》视图数据–控制–》类名 -->样式

类名要和数据绑定 —使用 —》 v-bind
类名的绑定方式

A: 对象的形式

<div :class = "{'size': classFlag,'bg': classFlag}"></div>

注意：对象中的key用字符表示

B: 数组的形式

<div :class = "['size','bg']"> </div>
<div :class = "[size,bg]"> </div>
<div :class = "[classFlag?size:bg]"> </div>

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../basic-source/vue.js"></script>
<style>
.size {
width: 50px;
height: 50px;
background: red;
margin: 10px;
}
.bg {
background: blue;
}
</style>
</head>
<body>
<div id="app">
<h3>类名的绑定</h3>
<div class="size"></div>
<div class="size bg"></div>
<hr>
<h3>类名-对象的形式</h3>
<!--</div>推荐用法 -->
<div :class="{'size':classFlage,'bg':classFlage}"></div>
<!-- <div :class="{size}"></div>//这个不等于data里面的size，直接等于上面的样式 -->
<hr>
<h3>类名-数组的形式</h3>
<div :class="['size','bg']"></div>
<div :class="[size]"></div>
<!--这个size等于data里面得size -->
<button @click='changeClass'>changeClass</button>
<button @click='classFlage = !classFlage'>changeClass</button>
<div :class="[classFlage?size:bg]"></div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
classFlage: true,
size: 'size',
bg: 'bg'
},
methods: {
changeClass() {
this.classFlage = !this.classFlage
}
}
})
</script>
</html>

weixin_44889992

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue--绑定类名

class为什么要绑定类名？数据–驱动–》视图数据–控制–》类名 -->样式类名要和数据绑定 —使用 —》 v-bind类名的绑定方式A: 对象的形式<div :class = "{'size': classFlag,'bg': classFlag}"></div>注意：对象中的key用字符表示B: 数组的形式<...
复制链接

扫一扫