51 lines
1.1 KiB
HTML
51 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
|
<script src="../vue-cookies.js"></script>
|
|
<title>Welcome Username</title>
|
|
</head>
|
|
<body>
|
|
<div id="v-main">
|
|
|
|
<p v-if="!welcomeValue">
|
|
Please enter your name : <input type="text" @keyup.enter="username">
|
|
</p>
|
|
<p v-else>
|
|
Welcome again : {{ welcomeValue }}
|
|
<button @click="deleteUser">{{deleteUserText}}</button>
|
|
{{deleteUserState}}
|
|
</p>
|
|
|
|
</div>
|
|
</body>
|
|
<script>
|
|
|
|
new Vue({
|
|
el:'#v-main',
|
|
data: function() {
|
|
return {
|
|
welcomeValue: this.$cookies.get('username'),
|
|
deleteUserText : 'Delete Cookie',
|
|
deleteUserState:''
|
|
}
|
|
},
|
|
methods: {
|
|
username : function(event){
|
|
this.welcomeValue = event.target.value;
|
|
this.$cookies.set('username', this.welcomeValue)
|
|
},
|
|
deleteUser: function(){
|
|
this.$cookies.remove('username');
|
|
this.deleteUserState = '√'
|
|
|
|
setTimeout(function(){
|
|
location.reload()
|
|
}, 0.5 * 1000)
|
|
}
|
|
}
|
|
})
|
|
|
|
</script>
|
|
</html> |