LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

{{title}}

All fields are Required

{{note.title}}

{{note.date}}

{{note.text}}

CSS
body {
  margin: 30px;
  background: #f3f3f3;
}
.card {
  margin: 20px 0;
  background: #ffffff;
  border: 10px;
  padding: 20px;
}
.non {
		display: none;
	}
	.active {
		display: block;
	}
JS
var app = new Vue({
			el: '#app',
			data: {
				isActive: false,
				title: 'Notemaster',
				note: {
					title: '',
					text: ''
				},
				notes: [{
					title: 'Title note',
					text: 'Wow, such text, such wow',
					date: new Date(Date.now()).toLocaleString()
				}]
			},
			methods: {
				addNote() {
					let {
						text,
						title
					} = this.note
					
					if (this.note.text.length > 1 && this.note.title.length > 1) {
						this.notes.push({
							text,
							title,
							date: new Date(Date.now()).toLocaleString()
						})
            this.isActive = false;
            this.note.text = "";
            this.note.title = "";
					} else {
						this.isActive = true;
					}
				},
				removeNote(index) {
					this.notes.splice(index, 1)
				}
			}
		})

Description

You can add note, delete note
Term
Wed, 12/27/2017 - 07:06

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv