<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>简易留言板</title>
<script src="vue.js"></script>
<style type="text/css">
.act{color:red;
background-color:yellow;}
#zuj div{
display:none;
width:130px;
height:100px;
background-color:#5E5353;
color:#EAE8E8;
}
#zuj div.show{
display:block;
}
.fz{font-size:36px;}
</style>
</head>
<body>
<div id="zuj" >
请输入你的用户名:<input type="text" v-model='usernm' ><br>
请输入留言:<textarea v-model='msg'></textarea>
<button @click="tj">提交</button>
留言列表
<UL>
<li v-for="(itm,idx) in arr">
<p>{{itm.ur}}说:</p><p>{{itm.mg}}<button @click='delit(idx)'>删除</button></p></li>
</UL>
</div>
</body>
<script type ='text/javascript'>
var vm = new Vue({
el:'#zuj',
data:{
usernm:null,
msg:null,
arr:[],
},
methods:{
tj(){
var tjobj={
ur:this.usernm,
mg:this.msg,
}
this.arr.push(tjobj);
},
delit(index){
this.arr.splice(index,1)
},
}
})
</script>
</html>