摘要：
v-bind:class和v-bind:style的写法基本相同，都有对象写法、数组写法，都可以用字符串拼接的方法实现某些特定的需求。这篇文章依旧是在vue官网文档的基础上进行整理，文章中会用完整的例子来对每一种写法进行案例演示，方便看官理解。

注意：文章中提到的vue是2.0版本，非1.0版本！

昨天的文章《Vue.js实例之v-bind:class用法》中介绍了：在vue中动态绑定class的几种用法，今天接着把动态绑定内联style的也给写下。如果看官已掌握昨天的内容，那么今天的就非常简单了。因为class和style的绑定方法基本一样。废话不多说，下面开讲。

一、对象语法

这个在官方的文档中有详细的说明，戳我看详情。艺灵大致整理了，方法如下：

1.1、html代码

<div id="app">
　<!--单个属性-->
　<div v-bind:style="{ color: activeColor}">color:{{activeColor}}</div>
　<!--驼峰写法-->
　<div v-bind:style="{'text-align':textAlign,fontSize: fontSize + 'px'}">text-align:{{textAlign}},fontSize:{{fontSize}}px</div>
　<!--一个对象-->
　<div v-bind:style="styleObject">{{styleObject}}</div>
　<!--前缀值(2.3以上版本)-->
　<div v-bind:style='{display:["-webkit-box","-ms-flexbox","flex"]}'>{{'{display:["-webkit-box","-ms-flexbox","flex"]}'}}</div>
</div>

上面展示了4种不同的对象写法，下面附上相关的js代码。

1.2、js代码

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
　var vm=new Vue({
　　el:'#app',
　　　data:{
　　　　activeColor: 'red',
　　　　fontSize: 30,
　　　　textAlign:'center',
　　　　styleObject:{
　　　　　color: 'red',
　　　　　fontSize: '13px'
　　　　}
　　　}
　});
</script>

最终的效果配图：戳我看demo

总是在相关的群里看到一些新人因为写法不规范导致无法渲染的情况发生，所以艺灵在这里特别强调：如果style属性中带有中划线-，例如：font-size、background-color等等时，必须用驼峰写法或者是引号引起来，否则在渲染时会出错！希望看官在项目中需要注意这个小技巧。

二、数组语法

想看官方权威文档的，可以戳我了解详情，下面的内容是艺灵整理的。

2.1、html代码

<div id="app">
　<!--整个数组-->
　<div v-bind:style="[baseStyles, overridingStyles]">{{[baseStyles, overridingStyles]}}</div>
　<!--数组+三元表达式-->
　<div v-bind:style="[{backgroundColor:isActive ? '#f00' : '#00f'},baseStyles]">如果isActive==true,背景红色</div>
　<!--对象+数组-->
　<div v-bind:style="[{ baseStyles: Active }, overridingStyles]">{{[{ baseStyles: Active }, overridingStyles]}}</div>
</div>

上面展示了3种不同的数组写法，下面附上相关的js代码。

2.2、js代码

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
　var vm=new Vue({
　　el:'#app',
　　　data:{
　　　　activeClass: 'active',
　　　　errorClass: 'text-danger',
　　　　isActive:true,
　　　　Active:true
　　　}
　});
</script>

最终的效果配图：戳我看demo

三、实战练习

下面来做一个小案例，也是出现问题比较多的。是什么呢？就是背景属性。

为什么说这个背景属性的问题比较多呢，首先我们来看下一个完整的正常css写法：
background:背景色 url(图片地址) 平铺 x轴偏移 y轴偏移
可以看到，上面的示例中有多个参数，这个时候我们就需要用到字符串拼接了。源码如下：

3.1、html代码

<div id="app">
　<!--背景实例-->
　<div v-bind:style="[baseStyles,{background:bgc+' url('+bgs+') '+rep,backgroundSize:'cover'}]"></div>
</div>

3.2、js代码

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
　var vm=new Vue({
　　el:'#app',
　　　data:{
　　　　bgc:'#ccc',
　　　　bgs:'http://cn.vuejs.org/images/logo.png',
　　　　rep:'0 0'
　　　}
　});
</script>

在上面的这个实战练习中，已将本节的知识点包括进来了。最终的效果如图：戳我看demo

好了，理论与实战都写完了。如果看官还不会的话，建议动手写两个demo就会了。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2017-05-12/517.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。