给你改了一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue-test</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<cmt-box @func = "func"></cmt-box>
<ul>
<li v-for="item in list" :key="item.id">
<span class="bdge">评论人:{{item.user}}</span>-----{{item.id}}-----
{{item.content}}
</li>
</ul>
</div>
<template id="tmpl">
<div>
<div>
<label>评论人<input type="text" v-model="user"></label>
<label>评论内容<input type="text" v-model="content"></label>
<input type="button" value="submit" @click="postComment">
</div>
</div>
</template>
<script>
var commentBox={
data(){
return {
}
},
props:["user","content"],
template:'#tmpl',
methods:{
postComment:function(){
this.$emit('func',this.user,this.content);
}
}
}
var vm = new Vue({
el:'#app',
data:{
list:[
{id:1,user:'礼拜11',content:'我是谁1'},
{id:2,user:'礼拜12',content:'我是谁2'},
{id:3,user:'礼拜13',content:'我是谁3'}]
},
created(){
this.loadComments()
},
methods:{
loadComments: function(){
localStorage.setItem('cmts',JSON.stringify(this.list))
var list =JSON.parse(localStorage.getItem('cmts')||'[]')
this.list = list
},
func:function(user,content){
this.list.push({id:Date.now(),'user':user,'content':content})
}
},
components:{
'cmt-box':commentBox,
}
})
</script>
</body>
</html>
追问
哇。。谢谢,麻烦问下你贴的这个序号怎么弄的,还有就是我的代码的问题在哪里呀。。
追答
这里修改成这样 可以做到id自增
添加了子组件要传递的参数
修改了响应的方法,方法去修改数据list,修改后会自动显示到页面
追问
哦,这个我会,我问的是这个---
再问下我两个代码除了数据以外其他的一模一样,为什么浏览器分别打开后只显示一个的数据,另一个不显示?
追答
你说这个么?
用data now 会出现重复的数据,最好别用
这么搞好一点,不过一般都是从数据库取吧。
哈哈 其实 我也是昨天刚学的Vuejs
追问
嗯,,,这是什么插件?那个浏览器数据问题是怎么回事?两个文件读的都是一个list
这么厉害。。。你是干什么的?
追答
哈哈 刚装的插件 网页链接 自己跟着装吧
vuejs 主组件声明的data 和子组件用的是一个呀。
localStorage这个玩意一般都没啥用的。建议你别用,没必要。自己声明就好了。
我干开发的呀,java全栈
我是慕课网 搜了个免费视频 还行说的听清楚的 你有兴趣的话 自己看看吧
干开发的 Java全栈
vuejs主组件声明的data 自组建也是要使用的
更多追问