成果圖~
最簡單的vue+boostrap的留言闆成果圖~ 下面是代碼 記得要引入vue.js和boostrap.css位址
<!DOCTYPE html>
<html >
<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>泡泡大魔王的留言欄</title>
<link rel="stylesheet" href="./bootstrap.min.css" target="_blank" rel="external nofollow" />
<script src="../js/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
ul li {
width: 100%;
}
body {
background: #999;
}
form {
width: 600px;
margin: 20px auto;
}
.txt {
margin-bottom: 30px;
}
.text {
font: 16px/20px "宋體";
margin-bottom: 15px;
}
.form-group {
text-align: center;
}
.panel-body {
width: 600px;
}
</style>
</head>
<body>
<!--v-show='布爾值'-->
<form id="lovetalk">
<div class="form-group">
<h2>{{master}}的留言闆</h2>
<input type="text" class="form-control txt" placeholder="username" v-model="username">
<textarea class="form-control text" rows="3" placeholder="請輸入您要留言的内容"
@input="content=$event.target.value"></textarea>
<button type="button" class="btn btn-primary btn-lg" style="width:100%" @click="add">立即送出</button>
</div>
<ul>
<li v-for="(item,index) of list">
<div class="panel panel-default">
<div class="panel-heading">{{item.name}}</div>
<div class="panel-body">
{{item.content}}
<div class="button-group">
<button type="button" @click="remove(index)" class="btn btn-danger pull-right"
style="margin-left:5px;" @click="remove(index)">删除</button>
<button type="button" @click="change(index,'qq')"
class="btn btn-info pull-right">修改</button>
</div>
</div>
</div>
</li>
</ul>
<button type="button" v-show="list.length!==0" class="alert alert-danger" role="alert" style="width:100%"
@click="clear">
清空全部留言
</button>
</form>
<script>
let vm = new Vue({
el: '#lovetalk',
data: {
master: "泡泡大魔王",
username: "泡泡",
content: "泡泡無敵大鐵拳！",
list: [
{ id: 1, name: '張三', content: '在麼' },
{ id: 2, name: '李四', content: '直接說事，我好知道我在不在' }
]
},
methods: {//vue的函數方法組就隻能叫methods不能改名字
add() {
if (this.username && this.content) {
this.list.push({
id: this.list.length + 1,
name: this.username,
content: this.content
})
} else {
alert("請輸入正确的留言")
}
},
remove(index) {
this.list.splice(index, 1)
},
change(index) {
var val = prompt("請輸入您要更改的内容");
this.list[index].content = val;
},
clear() {
this.list = [];
}
}
}
)
</script>
</body>
</html>
感悟：boosrtap好麻煩找了好久沒有看到中意的，希望能熟練再用吧
![一個小小的移動web版音樂播放器[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)