Vue2理解:类属性

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表达式的能力。

这是发生在背景中的一点Vue.js魔法，但您可以从本质上这样想：

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

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