18 类绑定

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

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

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

初始代码:

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Hello Vue!</title>
  5. <!-- including Vue with development version CDN -->
  6. <scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <divid="app">
  10. <h2>Welcome</h2>
  11. <div>
  12. <!-- OUR CODE GOES HERE -->
  13. </div>
  14. </div>
  15. <!-- including index.js file -->
  16. <scriptsrc="index.js"></script>
  17. <linkrel="stylesheet"href="style.css"></link>
  18. </body>
  19. </html>

index.js

  1. newVue({
  2. el:"#app",
  3. data:{}
  4. });

style.css

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

对象语法

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

  1. .success {
  2. color: green;
  3. font-weight: bold;
  4. font-size:70px;
  5. }

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

index.html(代码段)

  1. <divid="app">
  2. <h2>Welcome</h2>
  3. <div>
  4. <!-- class bindings: Objects -->
  5. <div :class="{ success : successFlag }">
  6. Hello!!
  7. </div>
  8. <p>The value of successFlag is {{ successFlag }}</p>
  9. </div>
  10. </div>

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

index.js

  1. newVue({
  2. el:"#app",
  3. data:{
  4. successFlag :true
  5. }
  6. });

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

class binding with objects

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

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

index.js(代码段)

  1. data:{
  2. successFlag :false
  3. }

Toggle class

奇迹般有效!

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

YESSSS! 使用 Vue,几乎所有内容都是肯定的!

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

方法 1:内联对象

index.html(代码段)

  1. <div>
  2. <!-- class bindings: Objects -->
  3. <divclass="underline" :class="{ success : successFlag, bcg : bcgFlag }">
  4. Hello!!
  5. </div>
  6. <p>The value of successFlag is {{ successFlag }}</p>
  7. </div>

index.js(代码段)

  1. data:{
  2. successFlag:false,
  3. bcgFlag:true
  4. }

style.css(代码段)

  1. .underline {
  2. text-decoration-color: red;
  3. text-decoration-line: underline;
  4. }
  5. .bcg {
  6. background-color: aqua;
  7. padding:5px;
  8. width: fit-content;
  9. }

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

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

方法 2:绑定非内联对象

index.html(代码段)

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

index.js(代码段)

  1. data:{
  2. classObject:{
  3. success :false,
  4. bcg :true
  5. }
  6. }

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

binding multiple objects

数组语法

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

index.html(代码段)

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

index.js(代码段)

  1. data:{
  2. successFlag:false,
  3. bcgFlag:true,
  4. successClass:'success',
  5. bcgClass:'bcg'
  6. }

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

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

<div class="underline success bcg">

Class binding with arrays

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

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