Vue.js basic knowledge points
1. Binding of styles
1 Overview
For data binding, a common requirement is to manipulate the element's class list and its inline styles. Class and style are attributes of HTML elements, which are used to set the style of the element. You can use v-bind to set the style attribute. You only need to calculate the final string of the expression. In addition to the string, the result type of the expression can also be object or array.
2. Binding of class attributes
[2-1] Object syntax
An object can be passed to v-bind:class to dynamically switch classes. It is worth noting that the v-bind:class directive can coexist with the normal class feature.
More properties can be passed in the object to dynamically switch between multiple classes.
Computed properties that return objects can be bound.
You can directly bind an object in the data.
<!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] Array syntax
You can pass an array to v-bind:class.
Classes in the list can be toggled using ternary expressions.
In vuejs1.0.19 and later versions, object syntax can be used in array syntax.
<!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. Binding inline styles
[3-1] Object syntax
Use v-bind:style to set inline styles, and css property names can be named in camel case.
You can directly bind a style object, which is more clear.
<!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] Array syntax
The array syntax of v-bind:style can apply multiple style objects to an element.
<!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. Automatically add prefix
When v-bind:style uses CSS properties that require a specific prefix, such as transform, Vue.js will automatically detect and add the corresponding prefix,
and use the prefix function in the vue.js source code to complete this function.