vuejs中v-bind绑定class时的注意事项

来源：互联网发布：微妙体育淘宝是真的吗编辑：程序博客网时间：2024/05/16 16:30

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
<style>
.static {
font-size: 120px;
width: 600px;
margin: 0 auto;
background-color: yellow;
height: 120px;
line-height: 120px;
text-align: center;
}

.class-a {
color: #FF0000;
}

.class-b {
text-decoration: underline;
}
</style>
</head>

<body>
<div id="app">
<div v-bind:class="classObject">
关于class的绑定
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
classObject: {
//'class-a',不能写成class-a（不带引号）；这里的classObject是js对象，而class-b是代表的是一个样式，所以必须写成'class-a',用引号括起来。
//否则这里的class-a只能代表classObject的一个属性名称而已，这样vuejs在初始化时，会报错。
'class-a':true,
'class-b': false
}
}
});
</script>
</body>

</html>

阅读全文

0 0