Skip to content

J
jbt-zh

OpenDocCN / jbt-zh
10 个月 前同步成功

通知 0
Star 8
Fork 1
J
jbt-zh

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
160.md 7.7 KB
Newer Older
W
init  
wizardforcel 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 
# 18.类绑定

> 原文： [https://javabeginnerstutorial.com/vue-js/18-class-bindings/](https://javabeginnerstutorial.com/vue-js/18-class-bindings/)

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

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

## 初始代码：

index.html

```java
<!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

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

style.css

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

## 对象语法

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

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

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

index.html（摘要）

```java
<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

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

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

![class binding with objects](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20440%20390'%3E%3C/svg%3E)

<noscript><img alt="class binding with objects" class="alignnone size-full wp-image-14193" height="390" src="img/bb21f07c51cbe083ac05a5835ff0ed39.png" width="440"/><p>在浏览器中可以清楚地看到结果。 Chrome DevTools窗格显示HTML代码中如何显示“ <code>success</code>”类。</p><p>如果我们将<code>successFlag</code>的值设置为<code>false</code>，那么这就是输出的样子。</p><p>index.js（摘要）</p><pre><code class="language-javascript">data: { successFlag : false }</code></pre><p><img alt="Toggle class" class="alignnone size-full wp-image-14194" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/04/2_objectValFalse-1.jpg" height="327" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20440%20327'%3E%3C/svg%3E" width="440"/></p><noscript><img alt="Toggle class" class="alignnone size-full wp-image-14194" height="327" src="img/16e81b7a149978ed0997a62f9a765381.png" width="440"/><p>奇迹般有效！</p><p>如果我们拥有普通的<code>class</code>属性，并且在此属性之上，我们想借助<code>v-bind:class</code>来切换另一个类的存在？ 换句话说，我们可以在一个元素上同时具有<code>class</code>和<code>v-bind:class</code>吗？ 可能吗？</p><p>YESSSS！ 使用Vue，几乎所有内容都是肯定的！</p><p>最好的部分是，我们可以通过<strong>的两种</strong>方式实现这一目标。</p><h3>方法1：内联对象</h3><p>index.html (snippet)</p><pre><code class="language-html">&lt;div&gt; &lt;!-- class bindings: Objects --&gt; &lt;div class="underline" :class="{ success : successFlag, bcg : bcgFlag }"&gt; Hello!! &lt;/div&gt; &lt;p&gt;The value of successFlag is {{ successFlag }}&lt;/p&gt; &lt;/div &gt;</code></pre><p>index.js (snippet)</p><pre><code class="language-javascript">data: { successFlag: false, bcgFlag: true } </code></pre><p>style.css（摘要）</p><pre><code class="language-css">.underline { text-decoration-color: red; text-decoration-line: underline; } .bcg { background-color: aqua; padding: 5px; width: fit-content; }</code></pre><p>普通的<code>class</code>属性具有将始终呈现的类<code>underline</code>。</p><p>还可能在对象中将更多字段传递给<code>v-bind:class</code>。 为了理解这一点，让我们根据其值的真实性切换两个类。 在上面的代码中，两个类<code>success</code>和<code>bcg</code>作为对象传递给<code>v-bind:class</code>。 <code>successFlag</code>和<code>bcgFlag</code>分别设置为<code>false</code>和<code>true</code>。 因此，呈现的类列表将变为“ <code>underline bcg</code>”，并且仅应用那些样式。</p><h3>方法2：绑定对象不内联</h3><p>index.html (snippet)</p><pre><code class="language-html">&lt;div class="underline" :class="classObject"&gt; Hello!! &lt;/div&gt;</code></pre><p>index.js (snippet)</p><pre><code class="language-javascript">data: { classObject: { success : false, bcg : true } }</code></pre><p>在vue实例的数据中指定了要绑定到<code>v-bind:class</code>的对象。</p><p><img alt="binding multiple objects" class="alignnone size-full wp-image-14191" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/04/3_multipleObjects-1.jpg" height="341" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20499%20341'%3E%3C/svg%3E" width="499"/></p><noscript><img alt="binding multiple objects" class="alignnone size-full wp-image-14191" height="341" src="img/426feb0ed4c8053a49bb317a6cb9fbe8.png" width="499"/><h2>数组语法</h2><p>可以使用类以数组的形式将类传递给<code>v-bind:class</code>，而不是使用对象，</p><p>index.html (snippet)</p><pre><code class="language-html">&lt;!-- class bindings: Arrays --&gt; &lt;div class="underline" :class="[successClass, bcgClass]"&gt; Array Bindings. &lt;/div&gt;</code></pre><p>index.js (snippet)</p><pre><code class="language-javascript">data: { successFlag: false, bcgFlag: true, successClass: 'success', bcgClass: 'bcg' }</code></pre><p>为简单起见，本示例也使用相同的类。</p><p>在chrome DevTools中检查时，这将呈现所有三个类，</p><p><code>&lt;div class="underline success bcg"&gt;</code></p><p><img alt="Class binding with arrays" class="alignnone size-full wp-image-14192" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/04/4_arrays-1.jpg" height="464" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20523%20464'%3E%3C/svg%3E" width="523"/></p><noscript><img alt="Class binding with arrays" class="alignnone size-full wp-image-14192" height="464" src="img/d21db25e02c10e675abfbee5efd15b24.png" width="523"/><p>上面讨论的所有代码都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub存储库</a>中找到。</p><p>启动您喜欢的IDE，并编写一些自己的方案！ 如有任何疑问，请随时在“评论”部分中进行提问。 请继续关注，因为我们的下一篇文章都是关于绑定内联样式的。</p><p> </p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"></h5></div></div> </body> </html></noscript>