Vue-利用template写出最简易版微博评论发布
废话不说，先上图
是你要的东西，就继续往下看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue.js</title>
<style>
.fabu{
background-color: rgb(255, 94, 0);
color: aliceblue;
}
ul li{
height: 125px;
width:500px;
position: relative;
}
.one{
width:500px;
height: 100px;
background-color: rgb(255, 174, 0);
display: inline-block;
}
ul button{
background-color: red;
}
.two{
position: absolute;
top:0;
right: 0;
height: 100%;
}
ul p{
margin-top: 25px;
}
</style>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
//推荐换成自己的本地文件加快网页打开速度
<div id="app">
<textarea rows="10" cols="100" v-model.lazy.trim="msg">
</textarea>
<!-- trim删去头尾空格 -->
<button class="fabu" @click="comments.push(msg)">发布</button>
<ul>
<template v-for="(v,i) in comments">
<li><div class="one"><p>{{i+1}}楼 {{v}}</p><div class="two"><button @click="del(i)">X</button></div></div></li>
</template>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "发评论的人最可爱!",
seem: "true",
comments: ['“当时的她们还默默无名，这个世界上还没人认识她们，而此后，世界会在惊讶中认识她们。”', ' 今天在商场，有个小哥哥正在弹这首曲子，就像Carole一样默默弹着…当时听到真的泪目啊', '这个曲刚一在桥上弹出来，我的眼泪就不禁掉落，哭成了后来星期二的样子。后来两人和声的部分，已经被泪水模糊得完全看不清画面了，这个旋律真的太好听了啊啊，超级感动的!', '米娜桑！5月29日出完整版哦！我好兴奋啊啊啊！！！！没有新一集的CAROLE& TUESDAY看的我，要死了。(灬ºωº灬)']
},
methods: {del:function(index){
this.comments.splice(index,1);
}
}
})
</script>
</body>
</html>
以上是 Vue-利用template写出最简易版微博评论发布 的全部内容， 来源链接： utcz.com/z/377015.html
