js 和 css 两用样式---前端各种高端操作2

template 中需要动态定义样式，通常做法：

<template>
  <div :style="{ color: textColor }">Text</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: '#ff5000'
    }
  }
}
</script>

 

 

高端做法：

1.定义 scss 文件

$menuActiveText:#409EFF;

:export {
  menuActiveText: $menuActiveText;
}

2.在 js 中引用：

• 使用 import 引用 scss 文件
• 定义 computed 将 styles 对象变成响应式对象
• 在 template 中使用 styles 对象

<template>
  <div :style="{ color: styles.menuActiveText }">Text</div>
</template>

<script>
import styles from '@/styles/variables.scss'

export default {
  computed: {
    styles() {
      return styles
    }
  }
}
</script>