阅读本文约需要5分钟
大家好，我是你们的导师，我每天都会在这里给大家分享一些干货内容(当然了，周末也要允许老师休息一下哈)。上次老师跟大家分享了Vue之 点击返回弹出推荐商品弹窗的知识，今天跟大家分享下Vue之 绑定样式的知识。
0 前言 在数据绑定中，最常见就是动态绑定元素的 class 或内联样式 style 咯，它们也是 HTML 的属性，所以可以使用 v-bind 指令 。 1 绑定class 1.1 对象语法 使用 v-bind:class 属性，实现动态切换 class。 html：
<div id="app"><div :class="{'hidden':isHidden}">看得见我嘛div>div>复制代码
js：
<script> var app = new Vue({ el: '#app', data: { isHidden: false, isBigger: true } });script>复制代码
输出结果： 看得见我嘛 注意： :class 是 v-bind:class 的简写形式。 示例中的类名 hidden 依赖于数据 isHidden ，当 isHidden 为 true 时， div 就会拥有类名 hidden，为 false 时就没有该类名 。 我们也可以一次传入多个属性，而且 :class 可以和常规的 class 同时使用。 html：
"app">
class="strong" :class="{'hidden':isHidden,'bigger':isBigger}">看得见我嘛
复制代码
js：
<script> var app = new Vue({ el: '#app', data: { isHidden: false, isBigger: true } });script>复制代码
输出结果： 看得见我嘛 当 :class 中的某个属性值为 true 时，就会加载对应的类名。 当 :class 的表达式过长或逻辑复杂时，我们可以通过计算属性来绑定。 html：
<div id="app2"> <div :class="customClasses">div>div>复制代码
js：
var app2 = new Vue({ el: '#app2', data: { isHidden: false, isBigger: true }, computed: { customClasses: function () { return { display: !this.isHidden, 'bigger-text': !this.isHidden && this.isBigger } } }});复制代码
输出结果：
**注意：**如果样式名称带有 -，那么必须加上单引号(示例中的 bigger-text)才能被正确识别。 1.2 数组语法 也可以使用数组语法，给 :class 绑定一个 class 数组。 html：
<div id="app"> <div :class="[strongerClass,biggerClass]">号外！号外div>div>复制代码
js：
<script> var app = new Vue({ el: '#app', data: { strongerClass:'strong', biggerClass:'bigger' } });script>复制代码
输出结果： 号外！号外 数组中的元素也可以使用三元表达式来计算 html：
<div id="app2"> <div :class="[isStrong?strongerClass:'']">号外！号外div>div>复制代码
js：
var app2 = new Vue({ el: '#app2', data: { isStrong:true, strongerClass:'strong' }});复制代码
输出结果： 号外！号外 当需要设置的 class 很多时，我们可以在数组语法的基础上使用对象语法，从而简化表达式，让代码变得更易维护。 html：
<div id="app3"> <div :class="[{'strong':isStrong}]">号外！号外div>div>复制代码
js：
var app3 = new Vue({ el: '#app3', data: { isStrong:true }});复制代码
输出结果： 号外！号外 也可以在 computed 或 methods 中返回需要设定的数组。 html：
<div id="app4"> <div :class="btnClass">号外！号外div>div>复制代码
js：
var app4 = new Vue({ el: '#app4', data: { size: 'small', isGreen: true }, computed: { btnClass: function () { return [ 'btn', { ['btn-' + this.size]: this.size !== '', ['btn-green']: this.isGreen } ]; } }});复制代码
输出结果： 号外！号外 注意： 上述示例使用了 ECMAScript 6 语法，所以在 webStorm 中需要进行设置(Setting → JavaScript → 选择 ECMAScript 6 )否则会出现红色波浪线哦： 在业务中会经常会利用计算属性为元素动态设置类名，尤其是在编写可复用的组件时。所以在开发过程中，如果表达式较长或者逻辑较为复杂，建议优先使用计算属性哦O(∩_∩)O~ 1.3 应用于组件 如果直接在自定义组件中使用 class 或 :class，那么样式规则就会直接应在这个组件的根元素上。 html：
<div id="app"> <text-component :class="{'isStrong':isStrong}">text-component>div>复制代码
js：
<script> Vue.component('text-component', { template: '
不懂基因测序的学霸不是好的人工智能公司 CEO
' }); var app = new Vue({ el: '#app', data: { isStrong: true } });script>复制代码
css：
<style type="text/css"> .isStrong{font-weight: bold}style>复制代码
渲染后代码： 不懂基因测序的学霸不是好的人工智能公司 CEO 效果： 这种方式仅适用于把样式应用于自定义组件的根元素。如果需要给自定义组件中的子元素设置样式，我们可以使用组件的 props 来实现。 2 绑定內联样式 也可以使用 v-bind:style 或 :style 直接给 HTML 元素绑定样式，它也有对应的对象语法与数组语法。 html：
<div id="app"> <div :style="border">马斯克太空网计划扩大 FCC已允许1.2万颗卫星入轨div>div>复制代码
js：
<script> var app = new Vue({ el: '#app', data: { border:{ border:'1px solid #00F', textShadow:'0 0 .3em gray' } } });script>复制代码
因为 JS 属性不支持短横分隔命名，所以我们这里使用 CSS 也支持的驼峰命名法。 渲染后代码： 马斯克太空网计划扩大 FCC已允许1.2万颗卫星入轨
参考：https://blog.csdn.net/weixin_34025151/article/details/88011270
今天就分享这么多， 关于 VUE 之 绑定样式， 你 学会了多少？欢迎在留言区评论，对于有价值的留言，我们都会一一回复的。如果觉得文章对你有一丢丢帮助，请点右下角【在看】，让更多人看到该文章。
