给你改了一下。
<!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>
你用的jquery吧，我试了下都是number类型阿
<div data-xx="0" id="a">a</div><div data-xx="1" id="b">b</div>
$(function(){
alert(typeof $("#a").data("xx"))
alert(typeof $("#b").data("xx"))
})
Vue2，data的两种写法
对象式和函数式，当使用组件时必须使用函数式，否则报错。
Vue2，el（element）的两种写法
1、new Vue()，已配置el属性。
2、创建Vue实例，再通过vm.$mount('#root')指定el的值。
重要的原则：
由Vue管理的函数（方法），使用普通函数（方法），如果使用箭头函数（方法），this不再是Vue的实例了。
案例1：
案例2：
