：class=“``level ${file.invalidMessage && 'has-text-danger'}`”是如何崩溃的？

Question

我正在使用VueJS和Express服务器跟随this tutorial上传文件，我遇到了一行我不理解的代码。

在8:19，我们被介绍给:class="`level ${file.invalidMessage && 'has-text-danger'}`"。我在Vue documentation中找不到任何类似的东西。

视频示例：

<div v-for="(file, index) in files" :key="index"
:class="`level ${file.invalidMessage && 'has-text-danger'}`"
>

</div>

Vue文档：

<div v-bind:class="{ active: isActive }"></div>
<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
<div v-bind:class="classObject"></div>
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

在Vue文档中没有类似于这种奇怪的语法。

我知道后引号内的${}是用来做什么的(模板文字)。

我知道代码的目的是什么，我已经对它进行了测试和工作，但我不知道它是如何工作的，以及使用了哪些快捷方式。

有人能“翻译”这行代码吗？

Answer 1

Vue中的:class绑定接受字符串：

​

new Vue({
  el: "#app",
  computed: {
    classlist() {
      return this.classes.join(' ')
    }
  },
  data() {
    return {
      classes: [
        'first-class',
        'second-class'
      ],
      domClassList: null
    }
  },
  mounted() {
    // getting and setting the classlist of the DOM element
    this.domClassList = document.getElementById('classList').getAttribute('class')
  }
})

.level {
  background: green;
  padding: 15px;
}

.first-class {
  color: white;
}

.second-class {
  font-weight: 700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div id="classList" :class="`level ${ classlist }`">
    CLASSES ADDED AS STRINGS
  </div>
  <div>Classes: {{ domClassList }}</div>
</div>

​

正如您在上面的代码片段中看到的，这些类是由一个level和在computed属性(classlist)中返回的Vue data变量( classes数组)的连接组成的。

问题的另一部分是条件格式：

​

new Vue({
  el: "#app",
  computed: {
    classlist() {
      return this.classes.join(' ')
    }
  },
  data() {
    return {
      firstOperand: true,
      classes: [
        'first-class',
        'second-class'
      ],
      domClassList: null
    }
  },
  methods: {
    setDomClassList() {
      // getting and setting the classlist of the DOM element
      this.domClassList = document.getElementById('classList').getAttribute('class')
    },
    toggleOperand() {
      this.firstOperand = !this.firstOperand
      // this.$nextTick is required so Vue can set the data
      // values before we read it from the DOM
      const self = this
      this.$nextTick(function() {
        self.setDomClassList()
      })
    }
  },
  mounted() {
    this.setDomClassList()
  }
})

.level {
  background: green;
  padding: 15px;
}

.first-class {
  color: white;
}

.second-class {
  font-weight: 700;
}


/* this class is set so you can see the difference on
   toggling the firstOperand variable
*/

.false {
  font-style: italic
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div id="classList" :class="`level ${ firstOperand && classlist }`">
    CLASSES ADDED AS STRINGS
  </div>
  <div>Classes: {{ domClassList }}</div>
  <hr />
  <div>
    FIRSTOPERAND IS {{ firstOperand }}<br />
    <button @click="toggleOperand">TOGGLE FIRSTOPERAND TO {{ !firstOperand }}</button>
  </div>
</div>

​

第二个代码段与第一个代码段几乎相同，只是引入了&&。我还创建了一个.false CSS值，以便您可以看到返回的false。