Vue

by wimp9487

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/6.0.1/autosize.min.js"></script>

<div id="app">
  <div class="container">
    <input v-model="noteTitle" placeholder="請輸入標題"/>
    <br>
    <textarea v-model="noteContent" ref="autosizeNeedDom" placeholder="請輸入內容"></textarea>
    <br>
    <select v-model="noteColor">
        <option value="" selected disabled>請選擇顏色</option>
        <option value="red">紅色</option>
        <option value="green">綠色</option>
        <option value="blue">藍色</option>
    </select>
    <br>
    <button @click="addButton()">新增</button>
  </div>
  <div class="note" v-for="note in notes" :style='{"background-color": note.color}'>
    <h3 class="title">{{ note.title }}</h3>
    <hr />
    <p class="content">{{ note.content }}</p>
    <button @click="deleteButton()">刪除</button>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
 
}
.container {
  width: 75vw;
  margin: 50px auto;
}
.container > input {
  width: 75vw;
  height: 20px;
  margin-bottom: 5px;
}
.container > textarea {
  width: 75vw;
  height: 70px;
  margin-bottom: 5px;
}
.container > select {
  width: 75vw;
  height: 20px;
  margin-bottom: 5px;
}
.container > button {
  width: 75vw;
  height: 30px;
  margin-bottom: 5px;
  background-color: rgba(125, 100, 255);
}
.container > button:hover {
  background-color: rgba(225, 75, 125);
}
.note {
  display: flex;
    justify-content: center;
    align-items: center;
  width: 75vw;
  margin: 10px auto;
  color: white;
}
.note > h3 {
  font-size: 20px;
}

Vue

const { createApp } = Vue

  createApp({
   data() {
  return {
    noteTitle:'',
    noteContent:'',
    noteColor:'',
    notes: JSON.parse(localStorage.getItem('notes')) || [
      {
        title: "春節行程安排",
        content: "吃飽睡，睡飽吃",
        color: "red",
      },
      
      {
        title: "工作待辦事項",
        content: "詢問各家廠商報價",
        color: "green",
      },
      {
        title: "運動健身計畫",
        content: "每天早上六點去健身",
        color: "blue",
      },
    ]
  }
  
} ,
   mounted() {
      this.notes[0].content = "多出門、到處走走、也要多運動" ;
      autosize(this.$refs.autosizeNeedDom);
    } ,
   methods: {
     addButton() {
        if (this.noteTitle === '' || this.noteContent === '' || this.oteColor === '') return;
        const newNoteValue = {
           title: this.noteTitle ,
           content: this.noteContent,
           color: this.noteColor
        };
        this.noteTitle = '';
        this.noteContent = '';
        this.noteColor = '';
        this.notes.push(newNoteValue);
      } , 
    deleteButton(index) {
        this.notes.splice(index, 1);
      } ,
  },
   watch: {
    notes: {
      handler(newValue, oldValue) {
      	localStorage.setItem('notes', JSON.stringify(this.notes));
      },
      deep: true
    }
  }
  }).mount('#app');