效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Text4本地存储</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app" style="margin-left: 50px;" >
<div >
<div >
<h3 >用户信息表</h3>
</div>
<div >
<form>
<div class="form-group">
<input type="text" v-model="userName" placeholder="用户名" />
</div>
<div class="form-group">
<input type="password" v-model="userPassWorld" placeholder="密码"/>
</div>
<div class="form-group">
<button type="button" @click="addUserInfo" >提交</button>
</div>
</form>
<hr />
<div v-if="userInfo.length === 0">
</div>
<div v-else>
<ul v-for="(item,index) in userInfo">
<li >用户名：{{item.userName}}</li>
<li >密码：{{item.userPassWorld}}</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : '#app',
data : {
userName : '',
userPassWorld:'',
userInfo:JSON.parse(localStorage.getItem('userInfo')) || []
},
methods: {
addUserInfo () {
if (this.userName && this.userPassWorld) {
var obj = {
userName: this.userName,
userPassWorld: this.userPassWorld
}
this.userInfo.push(obj)
localStorage.setItem('userInfo',JSON.stringify(this.userInfo))
this.userName = ''
this.userPassWorld = ''
}
}
}
})
</script>
</body>
</html>
版权声明：本文为this_name_true原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。