<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/vue.js"></script>
<style>
.v-enter,.v-leave-to{
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,.v-leave-active{
transition:all 0.6s ease;
}
</style>
</head>
<body>
<div id="app">
<declare-box></declare-box>
<ul class="list-group">
<!-- <transition-group> -->
<li class="list-group-item" v-for="item in list" :key="item.ID">
<span class="badge">評論人：{{item.user}}</span>
{{item.content}}
</li>
<!-- </transition-group> -->
</ul>
</div>
<template id="temp1">
<div>
<form action="" method="" role="form">
<legend class="">發表評論</legend>
<div class="form-group">
<label for="">評論人：</label>
<input type="text" class="form-control" v-model="user">
</div>
<div class="form-group">
<label for="">評論內容：</label>
<textarea class="form-control" v-model="content"></textarea>
</div>
<div class="form-group">
<button class="btn btn-primary" @click="add">發表評論</button>
</div>
</form>
</div>
</template>
<script>
var com1 = {
template:'#temp1',
data:function(){
return {
user:"",
content:""
}
},
methods:{
add:function(){
//localStorage本地存儲，只能存儲字符串
var coment = {ID:Date.now(),user:this.user,content:this.content};
var list = JSON.parse(localStorage.getItem("cmts"))||[];
list.unshift(coment);
localStorage.setItem('cmts',JSON.stringify(list));
this.user = ""
this.content=""
}
}
}
var app = new Vue({
el:"#app",
data:function(){
return {
list:[]
}
},
methods:{
},
created:function(){
this.list = JSON.parse(localStorage.getItem("cmts"))||[];
},
components:{
'declare-box':com1
}
});
</script>
</body>
</html>
