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魔法，但你可以想到它基本上是这样的：

Vue看到: class=指定数据绑定
Vue会查看class=属性中的内容，并看到以下内容：{ 'is-loading': isLoading }
Vue注意到它是一个对象，因此它遍历每个键/值对并对其进行评估，如果值（在这种情况下为isLoading）为真，则将键（is-loading）添加到class属性，如果值为false，则不是。

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

Vue2理解：类属性

1 个答案: