18 类绑定

18 类绑定

原文： https://javabeginnerstutorial.com/vue-js/18-class-bindings/

欢迎再次参加具有约束力的讨论。今天，我将为您学习类绑定。换句话说，我们将通过使用 Vue 将数据绑定到 HTML 元素的class属性来对其进行处理。为什么？因为可能需要我们经常操作元素的类列表。就像任何其他数据绑定一样，我们在此处也执行相同的歌曲和舞蹈，即强大的“v-bind”或其快捷方式“:”可用于处理这种情况。表达式可以计算为字符串，对象或数组。

听起来令人困惑？别担心！在一些示例的支持下，让我们一次迈出一步。您会立即看到自己冲刺！

初始代码：

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue!</title>
    <!-- including Vue with development version CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>Welcome</h2>
      <div> 
        <!-- OUR CODE GOES HERE -->
      </div>
    </div>
    <!-- including index.js file -->
    <script src="index.js"></script>
    <link rel="stylesheet" href="style.css"></link>
  </body>
</html>

index.js

new Vue({
  el: "#app",
  data: {}
});

style.css

<!-- LET US WRITE SOME CODE AS WE GO -->

对象语法

假设我们有一个名为“success”的类，其样式在style.css样式表中定义如下，

.success {
  color: green;
  font-weight: bold;
  font-size: 70px;
}

使用 Vue，通过将其作为对象传递给v-bind:class来动态切换此类非常容易。

index.html（代码段）

<div id="app">
  <h2>Welcome</h2>
  <div> 
  <!-- class bindings: Objects -->
  <div :class="{ success : successFlag }">
    Hello!!
  </div>
    <p>The value of successFlag is {{ successFlag }}</p>
  </div>
</div>

快捷方式:用于此处的指令v-bind。

index.js

new Vue({
  el: "#app",
  data: {
    successFlag : true
  }
});

非常简单！我们有一个div标签，显示为“Hello !!”。由于data属性的successFlag值为true，因此div标签中包含类success，并且其样式将应用于标签中的文本。

在浏览器中可以清楚地看到结果。 Chrome DevTools 窗格显示 HTML 代码中如何显示“success”类。

如果我们将successFlag的值设置为false，那么这就是输出的样子。

index.js（代码段）

data: { 
  successFlag : false 
}

奇迹般有效！

如果我们拥有普通的class属性，并且在此属性之上，我们想借助v-bind:class来切换另一个类的存在？换句话说，我们可以在一个元素上同时具有class和v-bind:class吗？可能吗？

YESSSS！使用 Vue，几乎所有内容都是肯定的！

最好的部分是，我们可以通过两种方式实现这一目标。

方法 1：内联对象

index.html（代码段）

<div> 
  <!-- class bindings: Objects -->
  <div class="underline" :class="{ success : successFlag, bcg : bcgFlag }">
    Hello!!
  </div>
  <p>The value of successFlag is {{ successFlag }}</p>
</div >

index.js（代码段）

data: {
  successFlag: false,
  bcgFlag: true
}

style.css（代码段）

.underline {
  text-decoration-color: red;
  text-decoration-line: underline;
}
.bcg {
  background-color: aqua;
  padding: 5px;
  width: fit-content;
}

普通的class属性具有将始终呈现的类underline。

还可能在对象中将更多字段传递给v-bind:class。为了理解这一点，让我们根据其值的真实性切换两个类。在上面的代码中，两个类success和bcg作为对象传递给v-bind:class。 successFlag和bcgFlag分别设置为false和true。因此，呈现的类列表将变为“underline bcg”，并且仅应用那些样式。

方法 2：绑定非内联对象

index.html（代码段）

<div class="underline" :class="classObject"> Hello!! </div>

index.js（代码段）

data: {
  classObject: { 
    success : false, 
    bcg : true 
  }
}

在 vue 实例的数据中指定了要绑定到v-bind:class的对象。

数组语法

可以使用类以数组的形式将类传递给v-bind:class，而不是使用对象，

index.html（代码段）

<!-- class bindings: Arrays -->
<div class="underline" :class="[successClass, bcgClass]">
  Array Bindings.
</div>

index.js（代码段）

data: {
  successFlag: false,
  bcgFlag: true,
  successClass: 'success',
  bcgClass: 'bcg'
}

为简单起见，本示例也使用相同的类。

在 chrome DevTools 中检查时，这将呈现所有三个类，

<div class="underline success bcg">

上面讨论的所有代码都可以在 GitHub 仓库中找到。

启动您喜欢的 IDE，并编写一些自己的方案！如有任何疑问，请随时在“评论”部分中进行提问。请继续关注，因为我们的下一篇文章都是关于绑定内联样式的。