javascript - Vue2理解:class attribute

Question

所以，我在看vue2教程，当我发现这段代码时，我不明白它为什么以及如何工作。

这是一种风格:

<style type="text/css">
    .is-loading { background: red }
</style>

和 html:

<div id="root">
<button :class="{ 'is-loading': isLoading }" @click="toggleClass"> Toggle Me</button>
</div>

和vue代码:

new Vue({
   el: '#root', 
   data: {
      isLocading: false
   },
   methods: {
        toggleClass: function(){
            this.isLoading = !this.isLoading;
        }
   }
});

现在，此代码在单击时切换按钮的类名，但我不明白的是 { 'is-loading': isLoading } 部分，它似乎不是三元运算符。

它到底在说什么？类名已经首先被提到为is-loading，但变量出现在它之后。

这不应该看起来像 { variable 吗？ '类(class)' ？ 'no-class' } 换句话说，变量不应该先出现，然后是类吗？

Answer 1

Vue.js 有能力运行 Javascript expressions within all data-binding areas .

这是在后台发生的一点 Vue.js 魔术，但您可以从本质上这样想它:

1. Vue 在 class= 上看到 : 指定数据绑定(bind)
2. Vue 查看 class= 属性中的内容，并看到以下内容:{ 'is-loading': isLoading }
3. Vue 注意到它是一个对象，因此它遍历每个键/值对并对其求值，如果值(在本例中为 isLoading)为真，它添加键(is -loading) 到类属性，如果值为 false，则不加载。

Vue 可以在数据绑定(bind)语法中解释三元组，但这是 Vue 的内部魔力，它允许您轻松地为一个组件创建多个 UI 状态变体。