1. Bind HTML Class

1.1 object syntax

• We can give v-bind:class = "object" an object to achieve dynamic switching class

Let's take a look at an example

<!--css style-->
.active{
	background: blue;
	}
<!--html Code-->
<div id="app-1">
	<p v-bind:class="{active:isActive}">Hello Vue!!!</p>
</div>

<!--JavaScript Code-->
var app1=new Vue({
			el:"#app-1",
			data:{
				isActive:true
			}
		})

• In addition, the v-bind:class instruction can coexist with the common class attribute, as follows

            <!--css-->
            .static{
				background: pink;
			}
			.font-size{
				font-size: 30px;
			}
			.box{
				width: 200px;
				height: 200px;
				text-align: center;
				line-height: 200px;
				color: red;
			}
<!--html-->
<div id="app-1">
	<p class="static" v-bind:class="{'font-size':isFont,box:isBorder}">Hello</p>
</div>

<!--JavaScript-->
var app1=new Vue({
			el:"#app-1",
			data:{
				isFont:true,
				isBorder:true,
			}
		})

It is worth noting that if there is a special sign "-" in the object, you need to enclose the string with '; otherwise, there will be a warning

• Data objects do not need to be defined in html tags. They can be defined in Vue templates.

<!--css-->
            .static{
				background: pink;
			}
			.font-size{
				font-size: 30px;
			}
			.box{
				width: 200px;
				height: 200px;
				text-align: center;
				line-height: 200px;
				color: red;
			}
<!--html-->
<div id="app-1">
	<p class="static" v-bind:class="classObject">Hello</p>
</div>

<!--JavaScript-->
var app1=new Vue({
			el:"#app-1",
			data:{
				classObject:{
					'font-size':true,
					box:true
				}
			}
		})

• You can also achieve the same effect as above by calculating attributes

<!--css-->
            .static{
				background: pink;
			}
			.font-size{
				font-size: 30px;
			}
			.box{
				width: 200px;
				height: 200px;
				text-align: center;
				line-height: 200px;
				color: red;
			}
<!--html-->
<div id="app-1">
	<p class="static" v-bind:class="obj">Hello</p>
</div>

<!--JavaScript-->
var app1=new Vue({
			el:"#app-1",
			data:{
				isActive:true,
				isFont:true,
				isBorder:true,
				error:null,
			},
			computed:{
				obj:function(){
					return {
						'font-size':this.isFont&&!this.error,
						box:this.error&&this.error.type==="fatal",
						active:this.isActive
					}
				}
			}
		})

1.2 array syntax

• v-bind:class can be an array as well as an object. Examples are as follows

<!--css-->
.font-size{
				font-size: 30px;
			}
			.box{
				width: 200px;
				height: 200px;
				text-align: center;
				line-height: 200px;
				color: red;
				border: 1px black solid;
			}
<!--html-->
<div id="app-2">
	<p v-bind:class="[fontSizeClass,boxClass]">Hello Vue!!!</p>
</div>

<!--js-->
var app2=new Vue({
			el:"#app-2",
			data:{
				fontSizeClass:'font-size',
				boxClass:'box'
			}
		})

• If you want to switch class styles based on conditions, you can use the binocular operator. Examples are as follows

<!--css-->
            .font-size{
				font-size: 30px;
			}
			.box{
				width: 200px;
				height: 200px;
				text-align: center;
				line-height: 200px;
				color: red;
				border: 1px black solid;
			}
<!--html-->
<div id="app-3">
    <p v-bind:class="[isTrue ? fontSizeClass : '',boxClass]">Hello Vue</p>
</div>
<!--js-->
var app3=new Vue({
			el:"#app-3",
			data:{
				isTrue:true,
				fontSizeClass:'font-size',
				boxClass:'box'
			}
		})

• However, it's inconvenient to read more troublesome expressions in the above way. You can write object syntax in array syntax. Examples are as follows

<!--css-->
            .active{
				background: blue;
			}
            .box{
				width: 200px;
				height: 200px;
				text-align: center;
				line-height: 200px;
				color: red;
				border: 1px black solid;
			}
<!--html-->
<div id="app-4">
	<p v-bind:class="[{active:isActive},boxClass]">Hello Vue</p>
</div>
<!--js-->
var app4=new Vue({
			el:"#app-4",
			data:{
				isActive:true,
				boxClass:"box"
			}
		})

1.6 for components

• Let's take an example

<div id="app-5">
    <!--Custom components-->
	<my-component class="baz boo"></my-component>
</div>
<!--Create a template to bind to our component-->
Vue.component("my-component",{
			template:"<p class='foo bar'>Hello Vue</p>"
		})
		
		var app5=new Vue({
			el:"#app-5",
			
		})

• Rendered html tags

<p class="foo bar baz boo">Hello Vue</p>

• Components can also bind data objects. Examples are as follows

<!--css-->
.font-size{
		font-size: 30px;
	    }
<!--html-->
<div id="app-6">
	<my-component v-bind:class="{'font-size':isFont}"></my-component>
</div>
<!--js-->
Vue.component("my-component",{
			template:"<p class='foo bar'>Hello Vue</p>"
		})
		
		var app6=new Vue({
			el:"#app-6",
			data:{
				isFont:true
			}
		})

• Rendered html tags

2. Bind inline style

2.1 object and array syntax

The object syntax of v-bind:style is very similar to css, but it is actually a Javascript object. css attribute command should follow hump nomenclature or - connection, but it should be enclosed with '(' font size ')

• Let's take an example to understand

<div id="app-8">
    <p v-bind:style="{color:activeColor, 'font-size':fontSize}">Hello Vue</p>
</div>

var app8=new Vue({
			el:"#app-8",
			data:{
				activeColor:"red",
				fontSize:"30px"
			}
		})

• styl and class also support objects. An example of an array is as follows

<!--object-->
<div id="app-9">
	<p v-bind:style="objStyle">Hello Vue!!!</p>
</div>
<!--array-->
<div id="app-10">
	<p v-bind:style="[baseStyles,overridingStyles]">Hello Vue!!!</p>
</div>
    
        <!--object-->
        var app9=new Vue({
			el:"#app-9",
			data:{
				objStyle:{
					color:"red",
					fontSize:"30px"
				}
			}
		})
		<!--array-->
		var app10=new Vue({
			el:"#app-10",
			data:{
				baseStyles:{
					color:"red"
				},
				overridingStyles:{
					fontSize:"30px"
				}
			}
		})

2.3 multiple values

• From 2.3.0, you can provide an array of multiple values for attributes in style binding, which is often used to provide multiple prefixed values. Examples are as follows

<!--display:flex;It's an elastic box-->
<div id="app-11" v-bind:style="{display:['-webkit-box','-ms-flexbox','flex']}">
</div>

var app11=new Vue({
			el:"#app-11"
		})

• Browser engine prefix

• The array in the example my chrome browser supports - WebKit box and flex but only renders the last flex. Because when there is more than one available value in the array, the last value of the array will be selected to render to the html tag

• Rendered html tags

<div id="app-11" style="display: flex;"></div>