1.跑马灯
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<style type="text/css">
span {
font-weight: 900;
font-size: 20px;
}
</style>
<div id="app">
<span>{{list}}</span><br><br>
<button @click="ck">飘</button>
<button @click="dz">定住</button>
<!-- 默认调取一次点击事件 -->
<span v-if="mr">{{ck()}}</span>
</div>
<script>
new Vue({
el: "#app",
data: {
list: "主要是开心!加油~~~",
piao:true,
mr:true//默认调取一次
},
methods: {
ck() {
// 检测是否在动画中防止bug
if(this.piao!=true)return;
this.piao=setInterval(()=>{
//截取下标为0的字符
var dy = this.list.substring(0,1);
//截取下标1后面的所有字符
var hm = this.list.substring(1);
// 把下标1后面的所有字符放到下边0前面
this.list = hm + dy
}, 200)
},
dz(){
// 让默认调取的点击事件消失
this.mr=false
// 点击暂停定时器
clearInterval(this.piao)
this.piao=true
}
}
})
</script>
</body>
</html>
?
2.吐槽大厅
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<style type="text/css">
h1{
background-color: #efefef;
width: 800px;
line-height: 100px;
font-weight: 500;
text-indent: 30px;
}
#app{
line-height: 25px;
position: relative;
}
.title{
width: 200px;
position: absolute;
left: 40px;
}
input{
text-indent: 10px;
width: 200px;
}
textarea{
text-indent: 10px;
width: 200px;
}
button{
background-color: #fff;
border: 1px #ccc solid;
height: 25px;
float: right;
margin-top: 5px;
}
.hade{
width: 500px;
left: 270px;
top: 5px;
position: absolute;
}
.item{
width: 100%;
border: #ccc solid 1px;
padding: 10px;
padding-top: 20px;
position: relative;
margin-top: -1px;
}
label{
color: #0099FF;
position: absolute;
right: 10px;
top: 10px;
}
span{
display: inline-block;
}
</style>
<h1>欢迎来到吐槽大厅</h1>
<div id="app">
<div class="title">
用户名<br>
<input type="text" v-model="sel" placeholder="用户名" v-model.trim="uname"><br>
吐槽内容<br>
<textarea cols="26" rows="2" v-model="sel" class="content" placeholder="吐槽内容" v-model.trim="temp"></textarea><br>
<button @click="addItem()" :disabled="!sel">提交</button>
</div>
<div class="hade">
<h3>吐槽回复:</h3>
<div class="item" v-for="item in list" :key="item.title">
<label @click="delItem(item)">删除</label>
<span>{{item.name}}说:{{item.title}}</span>
</div>
</div>
</div>
<script>
new Vue({
el: "#app",
methods: {
addItem(){
// 创建一项清单
var item={name:this.uname,title:this.temp,done:false};
// 在list的前面添加 item
this.list.unshift(item);
// 清空item
this.temp="";
},
delItem(item) {
// 查找item在list的下标
// value遍历的元素当value的title值等于item的title
var ind = this.list.findIndex(value => value.title === item.title)
// 删除list第ind个
// splice(从第几个,删除几个,添加内容)
this.list.splice(ind, 1)
}
},
data: {
// name 用户名
// list 清单列表数据
// title 清单的标题; done是否已完成
list: [{
"name":"韩韩",
"title": "学习html",
},
{
"name":"小李",
"title": "学习vue",
}
],
// 储存空的数据
temp:"",
uname:""
}
})
</script>
</body>
</html>
?