vue3 dynamic css variable(vue 3.2 add)

ブログに文章を書くのは久しぶりです
これはvue 3.2に追加された機能であり、v-bindを使用してCSSで属性を状態管理することができる.
新しい機能を体験するプロジェクトを作成します.@vue/cliモジュールを使用してプロジェクトを整理します.

npm i -g @vue/cli

インストールが完了したら、チェックしてみましょう.

vue --version

バージョンの出力は良好で、インストールは正常です.プロジェクトを作成します.

vue create hello-vue3

Default(Vue 3)を選択します.

1～3分待って、インストールが完了します.このディレクトリにナビゲートした後、npm run serveに実行してみます.


正常に動作していることを確認できます.3.2バージョンに追加された機能を練習する必要があるのでpackageです.jsonでvueモジュールのバージョンを表示します."vue": "^3.0.0"インストールが^(CARAT)のため、3.0.0>=3.0.0<4.00

Vscodeで上記のように確認できるかどうかはわかりませんが、WebStormでは確認できます.(3.2.20がインストールされていることを確認できます)

// HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>{{ colorState }}</div>
    <button type="button" @click="toggleColor">toggleColor</button>
  </div>
</template>

<script setup>
import {ref, defineProps} from 'vue';

const props = defineProps({
  msg: String
});

console.log(props);

const colorState = ref('red');

const toggleColor = () => {
  if (colorState.value === 'red') {
    colorState.value = 'blue';
  } else {
    colorState.value = 'red';
  }
};

</script>

<style scoped>
.hello h1 {
  text-align: center;
  color: v-bind(colorState);
}
</style>

color: v-bind(colorState);が見えますか?
スタイルの内部にステータスを設定することで、簡単に調整できます.
ステータスベースCSS変数State-Driven CSS Variablesと呼ばれる.
これがSCSSでもそのまま使えるかどうかはわかりませんが