js修改style样式_Vue之 绑定样式

阅读本文约需要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 之 绑定样式， 你 学会了多少？欢迎在留言区评论，对于有价值的留言，我们都会一一回复的。如果觉得文章对你有一丢丢帮助，请点右下角【在看】，让更多人看到该文章。