Vue系列学习笔记(三)Class和Style绑定

1. 绑定HTML Class

1.1 对象语法

• 我们可以给v-bind:class="对象"一个对象，以达到动态切换class

通过一个例子了解一下

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

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

• 此外v-bind:class指令还可以和普通class属性共存，如下

            <!--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,
			}
		})

值得注意的是如果对象里有"-"这种特殊符号，需要用’'来将字符串括起来，否则会有警告

• 数据对象不必在html标签里面定义，可以定义在Vue模板里。

<!--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
				}
			}
		})

• 还可以通过计算属性达到和上面一样的效果

<!--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 数组语法

• v-bind:class不仅可以是对象也可以是数组。例子如下

<!--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'
			}
		})

• 如果你想根据条件切换class样式，可以使用三目运算符。例子如下

<!--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'
			}
		})

• 不过上面这样写着实有些麻烦表达式多了就不方便阅读了，可以在数组语法中写对象语法。例子如下

<!--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 用在组件上

当在一个自定义组件上使用 class 属性时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

• 通过一个例子了解一下吧

<div id="app-5">
    <!--自定义的组件-->
	<my-component class="baz boo"></my-component>
</div>
<!--创建一个模板用与我们的组件绑定-->
Vue.component("my-component",{
			template:"<p class='foo bar'>Hello Vue</p>"
		})
		
		var app5=new Vue({
			el:"#app-5",
			
		})

• 渲染后的html标签

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

• 组件同样也可以绑定数据对象。例子如下

<!--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
			}
		})

• 渲染后的html标签

2. 绑定内联样式

2.1 对象和数组语法

v-bind:style的对象语法非常像css，但其实是一个Javascript的对象。css属性命令应该遵循驼峰命名法或-连接但是要注意用’'括起来(‘font-size’)

• 通过一个例子了解一下把

<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和class一样也支持对象，数组 例子如下

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

2.3 多重值

• 从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值。例子如下

<!--display:flex;是弹性盒子-->
<div id="app-11" v-bind:style="{display:['-webkit-box','-ms-flexbox','flex']}">
</div>

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

• 浏览器引擎前缀

• 例子中的数组我的chrome浏览器支持-webkit-box和flex 但是只会渲染最后一个flex。因为当数组中有不止一个可用值的时候就会选择数组最后一个值渲染到html标签中

• 渲染后的html标签

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