xinyi
/
video_admin_vue


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
							<!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 : '移除当前用户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>