废话不说,先上图

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>

相关文章:

  • 2021-12-04
  • 2022-01-23
  • 2021-04-30
  • 2021-08-13
  • 2022-12-23
  • 2022-12-23
  • 2021-12-14
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-01-24
  • 2021-07-08
  • 2021-11-17
  • 2021-10-31
  • 2021-06-28
相关资源
相似解决方案