<span style="color: blue;">${{变量}}</span>，为什么通过这种方式读取不到变量

`${{变量}}` 这种方式无法读取变量是因为它不是 Vue.js 的模板语法。

在 Vue.js 中，使用双花括号 `{{ 变量 }}` 或者 `v-bind` 指令来绑定数据到模板中。双花括号会将数据转换为字符串进行插值，而 `v-bind` 可以动态绑定属性或者表达式。

如果你想在 Vue.js 模板中使用变量，可以使用以下方式：

<template>
  <div>
    <span>{{ 变量 }}</span>
    <span :class="变量">动态类绑定</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      变量: '这是一个变量',
    };
  },
};
</script>

在上面的示例中，`{{ 变量 }}` 将会在模板中渲染出变量的值。`:class="变量"` 则将变量的值作为动态类绑定到元素上。

请确保在 Vue 组件中将变量定义在 `data` 属性中，这样 Vue.js 才能正确地追踪变量的变化并进行响应式更新。

总结起来，通过使用 `{{ 变量 }}` 或者 `v-bind` 指令，你可以在 Vue.js 模板中读取和使用变量。