vue中的class与style绑定
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中的class与style绑定相关的知识，希望对你有一定的参考价值。
参考技术A 1.在应用界面中， 某个(些)元素的样式是变化的，class/style绑定就是专门用来实现动态样式效果的技术2.class绑定
:class='xxx'
:class="p1: hasClass1, p2: hasClass2"，通过控制hasClass的布尔值实现样式切换
:class="['p1', 'p2']"，多个样式一起起作用
3.style绑定
:style=" color: activeColor, fontSize: fontSize + 'px' " ，其中activeColor/fontSize是data属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class,style绑定</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<h2>1.class绑定：class='xxx'</h2>
<p :class="class1">xxx是字符串</p>
<p :class="p1: hasClass1, p2: hasClass2">xxx是对象</p>
<p :class="['p1', 'p2']">xxx是量子</p>
<h2>2.样式绑定</h2>
<p class="p3" :style="color:activeColor,fontSize">
：style =“ color：activeColor，fontSize：fontSize +'px'”</p>
<button @click="update">更新</button>
</div>
</body>
<script>
new Vue(
el: "#app",
data:
class1: 'p1',
hasClass1: true,
hasClass2: false,
activeColor: 'red',
fontSize: '20px'
,
methods:
update()
this.class1 = 'p2'
this.hasClass1 = !this.hasClass1
this.hasClass2 = !this.hasClass2
this.activeColor = 'yellow',
this.fontSize = '30px'
)
</script>
<style>
.p1
color: red;
.p2
background: blue;
.p3
font-size: '20px',
</style>
</html>
Vue基础(中)：数据代理事件处理计算和监视属性class与style绑定
以上是关于vue中的class与style绑定的主要内容，如果未能解决你的问题，请参考以下文章
Vue基础(中)：数据代理事件处理计算和监视属性class与style绑定