Javascript Vue2理解：类属性

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

以下是一种风格：

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

现在，这段代码在单击时切换按钮的类名，但我不理解的是

{'is loading'：isLoading}

部分，它似乎不是三元运算符

它到底在说什么？当

正在加载时，类名称已被首先提到，但变量出现在它之后

这不应该看起来像
{variable？'class'？'no class'}
换句话说，变量不应该先出现，然后才是类吗
 Vue.js能够运行

这是在后台发生的一点Vue.js魔法，但您可以这样想：

Vue在
类=
上看到指定数据绑定的
：
Vue查看
类=
属性的内部内容，并查看以下内容：
{'is loading'：isLoading}
Vue注意到它是一个对象，因此它遍历每个键/值对并对其求值，如果值（
在本例中为isLoading
）为true，它会将键（
正在加载
）添加到类属性，如果值为false，则不会添加键
Vue可以在数据绑定语法中解释ternaries，但这是Vue的一点内部魔法，它允许您轻松地为一个组件创建多个UI状态变体。
Vue.js能够运行

这是在后台发生的一点Vue.js魔法，但您可以这样想：

Vue在
类=
上看到指定数据绑定的
：
Vue查看
类=
属性的内部内容，并查看以下内容：
{'is loading'：isLoading}
Vue注意到它是一个对象，因此它遍历每个键/值对并对其求值，如果值（
在本例中为isLoading
）为true，它会将键（
正在加载
）添加到类属性，如果值为false，则不会添加键
Vue可以在数据绑定语法中解释ternaries，但这是Vue的一点内部魔法，允许您轻松地为组件创建多个UI状态变体。
如果isLoading==true，只需添加类。如果isLoading==true，我知道如果isLoading==true，是否添加类，为什么按顺序出现？顺序中出现了什么？那是什么东西？{'is loading'：isLoading}是一个对象：仅检查属性是否为true，然后将其名称、类应用于元素。Vue创建了自己的DSL。所以你看到了HTML，其实不是。这是一个看起来像HTML的DSL。我想说的是，为什么它从右到左出现？我是说评估？几乎总是，我们将表达式求值为
if true:'somevalue'
，但在这种情况下，它的出现方式与
somvalue:if true
@FalsIt's只是添加类if isLoading==trues我知道如果
isLoading==true，它是否会添加类，但是，它为什么会按顺序出现？顺序中出现了什么？那是什么东西？{'is loading'：isLoading}是一个对象：仅检查属性是否为true，然后将其名称、类应用于元素。Vue创建了自己的DSL。所以你看到了HTML，其实不是。这是一个看起来像HTML的DSL。我想说的是，为什么它从右到左出现？我是说评估？几乎总是，我们将表达式求值为
if-true:'somevalue'
，但在这种情况下，它看起来与
somvalue:if-true
@FalsI仍然不理解。为什么这个特定的代码从右向左求值？从技术上讲，它不是从右向左评估的。Vue在类属性中看到它是一个JS对象，因此它识别出
正在加载的键
，然后通过查看
isLoading
值来询问如何处理它。我现在明白了，有了这个注释。这看起来有点奇怪，但也有点奇怪，这也意味着你不能假设将类名的值设置为
false
，因为如果它为false，vue将隐藏所有内容。如果你愿意，你可以将它设置为false，你只需要将它设置为键中的字符串值，而不是布尔值：
：class={'false'：isLoading}
现代JS模式可能会建议这样做：
：class=“{'isfalse'：isLoading}
我仍然不明白。为什么这个特定的代码从右到左求值？我知道，从技术上讲，它不是从右到左求值。Vue看到它是类属性中的JS对象，所以它识别正在加载的键
，然后通过查看值
isLoading
来询问如何处理它。我理解它n哦，有这样的评论。这看起来有点奇怪，但也有点奇怪，这也意味着你不能用
false
的值来设置类名，因为如果它为false，vue会隐藏所有内容。如果你愿意，你可以将它设为false，你只需要将它设为键中的字符串值，而不是布尔值：
：class={'false'：isLoading}
现代JS模式可能会建议这样做：
：class=“{'isfalse'：isLoading}
<div id="root">
<button :class="{ 'is-loading': isLoading }" @click="toggleClass"> Toggle Me</button>
</div>

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