本文展示了一个使用Vue.js实现的简单发布说说的功能。在HTML中引入Vue.js库，创建一个包含输入框和发布按钮的布局。通过Vue实例，实现了将输入的文字添加到列表显示的功能。当点击发布按钮时，输入的文字被添加到数组并显示在页面上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../vue.js"></script>
<title>Document</title>
<style>
body {
background-color: rgb(212, 228, 223);
}
.box {
width: 600px;
height: 600px;
margin-left: 200px;
border: 1px solid black;
background-color: rgb(223, 250, 196);
}
.top1 {
height: 30px;
line-height: 30px;
background-color: coral;
text-align: center;
}
.sind {
margin-top: 1px;
}
li {
list-style: none;
}
.usind li {
height: 30px;
margin-left: -40px;
border-bottom: 1px solid rgb(121, 22, 221);
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<div class="top1 ">
<span>发布微博</span>
</div>
<div class="sind">
<textarea cols="70" rows="8" v-model="textt"></textarea>
<button v-on:click="add">发布</button>
</div>
<div class="usind">
<ul>
<li v-for="(item,index) in arr">{{item}}</li>
</ul>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
textt: '',
arr: []
},
methods: {
add: function() {
// console.log(this.textt)
console.log(this.arr.push(this.textt))
}
}
})
</script>
</body>
</html>
样式有点不美观，见谅
喜欢编程的可以联系一起学习
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
