Vue2 理解 :class 属性

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;
        }
   }
});

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

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

这不应该像 { variable ? 'class' ? 'no-class' } 换句话说，变量不应该先出现，然后是 class 吗？

Answer 1

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

这是在后台发生的一些 Vue.js 魔术，但您基本上可以这样想：

Vue 在 class= 上看到 : 指定 data-binding
Vue 查看 class= 属性内部的内容，并看到以下内容：{ 'is-loading': isLoading }
Vue 注意到它是一个对象，因此它遍历每个 key/value 对并对其进行评估，如果值（在本例中为 isLoading）为真，则添加键（is-loading) 添加到 class 属性，如果值为 false，则不添加。

Vue 可以在 data-binding 语法中解释三元组，但这是 Vue 的一些内部魔力，它允许您轻松地为一个组件创建多个 UI 状态变化。

Vue2 理解 :class 属性

Vue2 understanding :class attribute

javascript

vue.js

vuejs2