一.登录页面
<template>
<div>
<form>
<label for="">
用户名:
</label>
<input type="text" v-model ="person">
<br>
<label for="">
密码:
</label>
<input type="password" v-model="password" id="pass">
<input type="button" value="登录" @click="add">
</form>
</div>
</template>
<script>
export default {
data() {
return {
person:'',
password:''
}
},
methods: {
add(){
let newList ={id:Date.now(),person:this.person,password:this.password}
let list = JSON.parse(localStorage.getItem('cmts')|| '[]')
list.unshift(newList)
localStorage.setItem('cmts',JSON.stringify(list))
this.user =this.content =''
this.$emit('gogo')
this.$router.push({path:'/profile'})
}
},
}
</script>
<style >
input{
border: 1px solid black
}
#pass{
margin-left: 15px;
}
</style>
二.跳转页面,我这里是通过路由跳转的
<template>
<div @gogo="loadComments">
<ul>
<li v-for="item in list" :key="item.id">
<span>用户名:{{item.person}}</span>
<time>密码:{{item.password}}</time>
</li>
</ul>
</div>
</template>
<script>
import home from 'components/Home/home'
export default {
components:{
home
},
data() {
return {
result:null,
list:[
{id:Date.now(),person:'小刘',password:123456}
]
}
},
methods: {
loadComments(){
let list = JSON.parse(localStorage.getItem('cmts')|| '[]')
this.list = list
}
},
created() {
this.loadComments()
},
}
</script>
<style>
</style>