class的样式绑定
我们可以为 v-bind:class 设置一个对象,从而动态的切换 class:
:class="{‘属性名’:‘属性值’}" 属性名就是生效的类名 值为布尔值,true生效,false不生效
直接绑定一个对象 :class=“aa” aa 是data中的一个属性: aa:{“blue”:true,“big”:false}
也可以通过计算属性返回一个对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
}
.bg{
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<!-- 想要动态的设置class,也是要给一个对象 -->
<!-- 属性名就是类名 -->
<!-- 属性值:就是布尔值。如果为true就代表有这个类名;false就代表没有 -->
<div class="box " :class="{bg:isb}"></div>
点击按钮会改变div的背景颜色
<button @click="yell">点击</button>
</div>
<script src="/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
isb:false,
if:0
},
methods: {
yell(){
if(this.if==0){
this.isb=true
this.if=1
} else{
this.isb=false
this.if=0
}
}
},
})
</script>
</body>
</html>
style属性的绑定
在行内属性中书写样式
<div style="color:red;font-size:48px"> div</div>
把行内属性改成对象,以对象方式绑定style属性
外部增加():属性值改造成字符串;分高改造成逗号;属性名到对象名的改变
要遵守驼峰命名法
<div v-bind:style="{color:'red',fontSize:'48px'}"> div</div>
把属性值改成变量
第一个color是属性名 第二个color是变量名 和data中保持一致
<div v-bind:style="{color:color,fontSize:size}"> div</div>
<script>
new Vue({
el: '#app',
data: {
color:'red',
size:'68px'
}
})
</script>