 |
位置：电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：Vue.JS入门教程 > class属性 绑定数据里的一个对象 | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： class属性 绑定多个样式 | 下一篇： class属性 绑定返回对象的计算属性 |
|
我们可以先定义一个样式的对象；然后直接在 v-bind:class 设置对象的名称即可。 基础用法 v-bind:class="对象名" 示例下面实例中我们定义了两个样式lvse_qukuai（绿色区块）和cuowu（红色区块）；然后我们定义了两个样式对象classObject1（绿色区块）和classObject2（红色区块）；最后我们直接使用v-bind:class语法绑定样式对象即可。 代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js样式-class属性绑定数据里的一个对象</title>
<!--加载本地vue.js的框架-->
<script src="vue2.2.2.min.js"></script>
<style>
/*自定义一个绿色区块的样式：宽高100px，绿色背景*/
.lvse_qukuai {
width: 100px; /*宽度*/
height: 100px; /*高度*/
background-color: green;/*绿色背景*/
}
.cuowu{
background-color: red;/*红色背景*/
}
</style>
</head>
<body>
<!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值-->
<div id="app">
<!--使用对象classObject1来绑定样式-->
<!--对象里面先是显示lvse_qukuai绿色背景，然后再被样式cuowu的红色背景覆盖-->
<div v-bind:class="classObject1">红色背景</div>
<hr>
<!--使用对象classObject2来绑定样式-->
<!--对象里面显示lvse_qukuai绿色背景（样式cuowu的红色背景因为设置为false不覆盖）-->
<div v-bind:class="classObject2">绿色背景</div>
</div>
<script>
//Vue语句-开始
new Vue({
el: '#app',//app为前面div区块的id的值，通过"#"号绑定
data: {
//自定义样式对象classObject1
classObject1: {
lvse_qukuai: true,//初始化属性
cuowu: true//初始化属性
},//后面有数据，则这里定义完毕后面需要跟上逗号"，"
//自定义样式对象classObject2
classObject2: {
lvse_qukuai: true,//初始化属性
cuowu: false//初始化属性
}//后面没有数据，则这里定义完毕后面不需要跟上逗号"，"
}
})//Vue语句-结束
</script>
</body>
</html>效果图
|
|
| 上一篇： class属性 绑定多个样式 | 下一篇： class属性 绑定返回对象的计算属性 |
