VUE は背景色を変更します

1. ニーズを決定する

実装する前に、まず要件を明確にする必要があります。つまり、ユーザーは何らかの方法でページの背景色を変更できるため、この機能を実装するための操作可能なコントロールを提供する必要があります。

2. Vue コンポーネントを作成する

ページの背景色の置換機能を実装するには、Vue コンポーネントを作成します。簡単な Vue コンポーネントの例を次に示します。

 

<template>
  <div>
    <h1>当前背景颜色：{
   
   { backgroundColor }}</h1>
    <div>
      <button @click="setBackgroundColor('red')">红色</button>
      <button @click="setBackgroundColor('green')">绿色</button>
      <button @click="setBackgroundColor('blue')">蓝色</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      backgroundColor: 'white',
    };
  },
  methods: {
    setBackgroundColor(color) {
      this.backgroundColor = color;
      document.body.style.backgroundColor = color;
    },
  },
};
</script>

 この例では、backgroundColor変数を使用して現在のページの背景色を保存します。ユーザーがボタンをクリックすると、setBackgroundColorメソッドを呼び出して背景色を変更し、body同時に背景色を要素に適用します。

3. Vueインスタンスを作成する

Vue コンポーネントを表示するには、Vue インスタンスを作成する必要があります。以下に例を示します。

<template>
  <div>
    <h1>我的网站</h1>
    <background-control></background-control>
  </div>
</template>

<script>
import BackgroundControl from './BackgroundControl.vue';

export default {
  components: {
    'background-control': BackgroundControl,
  },
};
</script>

この例では、BackgroundControl作成したばかりのコンポーネントをテンプレートに追加し、 でラップします<div>。次に、コンポーネントを Vue インスタンスに登録する必要があります。

4. スタイルを追加する

最後に、コントロールを美しくするためにスタイルを追加する必要があります。スタイルの例を次に示します。

button {
  padding: 10px;
  margin-right: 10px;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
}

button.red {
  background-color: red;
}

button.green {
  background-color: green;
}

button.blue {
  background-color: blue;
}

この例では、CSS スタイルを使用してボタンを美しくします。各ボタンに標準スタイルを設定し、およびredボタンにそれぞれ異なる背景色のスタイルを追加しました。greenblue