Vue.js基础知识点
一、样式的绑定
1、概述
对于数据绑定，一个常见需求就是操作元素的class列表和它的内联样式。class与style是HTML元素的属性，用于设置元素的样式，可用v-bind来设置样式属性，只需要计算出表达式最终的字符串，表达式的结果类型除了字符串之外，还可以是对象或数组。
2、class属性的绑定
【2-1】对象语法
可以传给v-bind:class一个对象来动态地切换class，值得注意的是，v-bind:class指令可以和普通的class特性共存。
可以在对象中传入更多属性用来动态切换多个class 。
可以绑定返回对象的计算属性。
可以直接绑定数据里的一个对象。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>样式绑定-对象语法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.demo {
display:inline-block;
width:300px;
height:300px;
margin-left:20px;
}
.static {
border:1px solid #000;
}
.bg-red{
background:red;
}
</style>
</head>
<body>
<div id="app">
<div class="demo" :class="{static:isShow}"></div>
<div class="demo" :class="a"></div>
</div>
<script>
new Vue({
el:"#app",
data:{
isShow:true,
a:{
'bg-red':true
}
}
});
</script>
</body>
</html>
【2-2】数组语法
可以把一个数组传给v-bind:class 。
可以使用三元表达式来切换列表中的 class。
在vuejs1.0.19以及以后的版本，可以在数组语法中使用对象语法。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>样式绑定-数组语法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.demo {
display:inline-block;
width:300px;
height:300px;
margin-left:20px;
}
.bg-red{
background:red;
}
.bg-yellow{
background:yellow;
}
</style>
</head>
<body>
<div id="app">
<div class="demo" :class="[bgred,bgyellow]"></div>
<div class="demo" :class="[bgyellow,isShow?bgred:'']"></div>
<div class="demo" :class="[bgyellow,{bgred:isHide}]"></div>
</div>
<script>
new Vue({
el:"#app",
data:{
isShow:true,
isHide:false,
bgred:'bg-red',
bgyellow:'bg-yellow'
}
});
</script>
</body>
</html>
3、绑定内联样式
【3-1】对象语法
使用v-bind:style来设置内联样式，css属性名可以用驼峰命名来命名。
可以直接绑定一个样式对象，更清晰。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>内联样式绑定-对象语法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="{color:'red',fontSize:fontsize+'px',fontWeight:fontweight}">你好</div>
<div :style="demo">今天又是元气满满的一天</div>
</div>
<script>
new Vue({
el:"#app",
data:{
fontsize:30,
fontweight:'bold',
demo:{
color:'blue',
fontSize:'50px'
}
}
});
</script>
</body>
</html>
【3-2】数组语法
v-bind:style的数组语法可以将多个样式对象应用到一个元素上。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>内联样式绑定-数组语法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="[baseStyle,otherStyle]">你好</div>
</div>
<script>
new Vue({
el:"#app",
data:{
baseStyle:{
fontSize:'48px',
color:'green'
},
otherStyle:{
fontWeight:'bold'
}
}
});
</script>
</body>
</html>
4、自动添加前缀
当 v-bind:style 使用需要特定前缀的CSS属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀，
在vue.js源码中采用prefix函数来完成这个功能。