최종 과제

 

---

<script src="https://unpkg.com/vue@3.2.30/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4.0.12/dist/vue-router.global.js"></script>

<div id="app">
  <div>
    <input type="text" v-model="newItem" placeholder="입력한 문자열" />
    <button @click="addItem">추가</button>
  </div>
  <div class="item" v-for="(item, index) in items" :key="index">
    <span :style="{ color: item.color }">{{ item.text }}</span>
    <button @click="removeItem(index)">X</button>
  </div>
</div>

 

const app = Vue.createApp({
  data() {
    return {
      newItem: '',
      items: [],
    };
  },
  methods: {
    addItem() {
      if (this.newItem.trim() !== '') {
        const color = this.newItem || 'black';
        this.items.push({ text: this.newItem, color });
        this.newItem = '';
      }
    },
    removeItem(index) {
      this.items.splice(index, 1);
    },
  },
});

app.mount('#app');