Vue class和style绑定-蒲公英云

Vue class和style绑定

水深无声 2022-05-20 09:38 372阅读 0赞

关于vue中class和style的绑定，我们在本篇主要是为大家说明一下该怎么使用v-bind来进行处理。

首先我们看下class的几种绑定方式：

1.对象语法
通过v-bind：class设置一个对象，可以动态的切换class。，在对象中我们可以传入多个属性。其中：class和普通的class是可以共同存在的。

<template>
  <div class="hello" :class="{'active': isActive, 'error': isError}">
  </div>
</template>
<script> export default { name: 'HelloWorld', data() { return { isActive: true, isError: false } } } </script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> </style>

我们运行程序，当然了我们的样式我没有写，这里只是给大家做个演示。
我们在浏览器中查看一下对应的html：
这里写图片描述

大家可以看到类名被替换为：class=”hello active”
这里我们说明一下：

其中类hello是普通类，这个是固定存在的。在后面的：class里面，active和error是我们需要根据我们数据来动态添加的。
我们拿active来说明，当active依赖的数据isActive为true时，div会拥有类名active，否则没有。所以后面的error类并未显示出来。

我们修改isError的值为true：
类名error就会增加到div的类名中去。
这里写图片描述

当然了，我们甚至可以直接把对象绑定到类名中去。

<template>
  <div class="hello" :class="hello_styles">
  </div>
</template>
<script> export default { name: 'HelloWorld', data() { return { hello_styles: { active: true, error: true } } } } </script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> </style>

显示效果和上面一样。

另外，我们还可以绑定计算属性：

<template>
  <div class="hello" :class="hello_styles_comp">
  </div>
</template>
<script> export default { name: 'HelloWorld', data() { return { isActive: true, isError: 'failed' } }, computed: { hello_styles_comp: function () { return{ active: this.isActive && !this.isError, 'text-fail': this.isError && this.isError === 'failed' } } } } </script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> </style>

绑定语法和上面一样，不过在计算属性里面我们可以返回多个。

2.数组语法

<template>
  <div class="hello" :class="[activeClass,errorClass]">
    hello
  </div>
</template>
<script> export default { name: 'HelloWorld', data() { return { activeClass: 'active', errorClass: 'error' } } } </script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> </style>