20-组件案例发表评论功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue.js"></script>
<style>
li span{
float: left;
}
</style>
</head>
<body>
<div id="app">
<com1 @func="loadcom"></com1>
<ul>
<li v-for="item in list" :key="item.id">
{{item.content1}}
<span>评论人:{{item.user}}</span>
</li>
</ul>
</div>
<template id="tem1">
<div>
<div>
<lable>评论人:</lable>
<input type="text" v-model="user">
</div>
<div>
<lable>内容:</lable>
<input type="text" v-model="content">
</div>
<div><button @click="postcomment">发表评论</button></div>
</div>
</template>
<script>
Vue.component("com1",{
data(){
return {
user:"",
content:"",
}
},
template:"#tem1",
methods:{
postcomment(){
var comt={id:Date.now(),user:this.user,conent:this.content}
var list= JSON.parse(localStorage.getItem("cms") || "[]")
list.unshift(comt)
localStorage.setItem("cms",JSON.stringify(list))
this.user=this.content=""
this.$emit('func')
}
}
})
var comment = {id:Date.now,user:this.user,content:this.content}
var vm=new Vue({
el:"#app",
data:{
// uesr:"",
// content:"",
list:[
{id:Date.now(),user:"李白",content1:"天生我材必有用"},
{id:Date.now(),user:"xiao白",content1:"天生我材就有用"},
{id:Date.now(),user:"xiaoxiao白",content1:"天生我材就用"},
]
},
created(){
this.loadcom()
},
methods:{
loadcom(){
var list= JSON.parse(localStorage.getItem("cms") || "[]")
this.list=list
}
}
})
</script>
</body>
</html>