绑定style属性
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组
<body>
<div id="app">
<!-- 在行内属性中书写样式 -->
<div style="color:pink; font-size:28px;"> 我是div盒子 </div>
<!-- 把行内属性改造成对象,以对象的方式绑定style属性 -->
<!-- 外部增加{};属性值改为字符串;分高改造成逗号;属性名到对象名的改变 -->
<div v-bind:style=" {color:'green',fontSize:'28px'} ">我是以对象方式div盒子</div>
<!-- 把属性值改成变量,变量由自己来定义 -->
<!-- 第一个color是样式名;第二个color是变量名,和data中的数据保持一致 -->
<div v-bind:style=" {color:color,fontSize:size} ">我是以对象方式div盒子</div>
</div>
<script src="../vue.js"></script>
<script>
new Vue ({
el:'#app',
data:{
color:'green',
size:'29px',
}
})
</script>
</body>
以对象的方式绑定class属性
<style>
.active {
width: 200px;
height: 200px;
background-color: coral;
margin: auto;
}
</style>
</head>
<body>
<!-- 以对象方式绑定class属性 -->
<div id="app">
<!-- v-bind可以缩写为[:] -->
<div v-bind:class=" {'active':isActive} "></div>
<!-- <div :class=" {'active':isActive} "></div> -->
</div>
<script src="../vue.js"></script>
<script>
new Vue ({
el:'#app',
data:{
// 值为true,有属性,值则会显示style样式
isActive:true
// 值为false,没属性值,则会隐藏style样式
// isActive:false
}
})
</script>
以对象的方式绑定class及作业
<style>
.box {
width: 200px;
height: 200px;
border: 5px solid #000;
margin: auto;
}
.active {
background-color: chocolate;
}
</style>
</head>
<body>
<div id="app">
<div class="box" v-bind:class=" {active:isActive} "></div>
<!-- 想要动态的设置class,也是给一个对象 -->
<!-- 属性名:就是类名 -->
<!-- 属性值:就是布尔值,如果为true就代表有这个类名;false代表没有 -->
<!-- 按钮案例 -->
<button @click="btn">我是一个按钮</button>
</div>
<script src="../vue.js"></script>
<script>
new Vue ({
el:'#app',
data:{
isActive: false,
sss:0
},
methods:{
btn() {
if(this.sss == 0){
this.isActive = true
// this.sss = 1;
} else {
this.isActive = flase;
this.sss = 0;
}
}
}
})
</script>