</div>
</div>
<!--待办事项-->
<div class="right">
<span>已办事项</span>
<div class="dones">
<ul>
<li v-for="(done, index) in doneThings" :key="index">
<input type="radio" name="done" v-on:click="delThing(index)"><span>{{ done }}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
todo: '',
addDone: '',
todoThings: ['写代码', '五道口吃火锅', '超市买鸡蛋', '图书馆看书', '看电影', '看演唱会', '游泳', '跑步'],
doneThings: ['看书', '写博客', '散步', '跟朋友聊天', '打电话给父母', '学炒菜', '洗衣服', '打扫房间']
},
methods: {
todoEnter: function () {
if (this.todo) {
this.todoThings.push(this.todo);
this.todo = '';
}
},
addThing: function (index) {
event.currentTarget.checked = false;
things = this.todoThings.splice(index, 1)[0];
this.doneThings.push(things);
},
delThing: function (index) {
event.currentTarget.checked = false;
things = this.doneThings.splice(index, 1)[0];
this.todoThings.push(things);
}
}
})
</script>
</body>
</html>
三、案例：轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
width: 800px;
height: 500px;
position: relative;
top: 80px;
}
.img {
width: 800px;
height: 500px;
position: absolute;
}
img {
width: 800px;
height: 500px;
}
.circle {
width: 130px;
height: 2px;
position: absolute;
left: 50%;
margin-left: -65px;
bottom: 30px;
}
.circle span {
padding: 1px 10px;
background-color: #c2ccd1;
border-radius: 50%;
margin-left: 5px;
cursor: pointer;
}
.circle span.current {
background-color: #F90;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="img"><img :src="imageArray[currentIndex].imgSrc" v-on="{ mouseenter: mouseEnter, mouseleave: mouseLeave}"></div>
<div class="circle">
<span v-for="(circle, index) in circleCount" :class="{current: currentIndex===index}" v-on:click="changePic(index)"></span>
</div>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
imageArray: [
{ id: 1, imgSrc: "../images/timg1.jpg" },
{ id: 2, imgSrc: "../images/timg2.jpg" },
{ id: 3, imgSrc: "../images/timg3.jpg" },
{ id: 4, imgSrc: "../images/timg4.jpg" },
{ id: 5, imgSrc: "../images/timg5.jpg" },
],
currentIndex: 0,
circleCount: 5
},
methods: {
prevImg: function () {
this.currentIndex = this.currentIndex - 1;
if (this.currentIndex < 0) {
this.currentIndex = this.imageArray.length - 1;
}
},
nextImg: function () {
this.currentIndex = this.currentIndex + 1;
if (this.currentIndex === this.imageArray.length) {
this.currentIndex = 0;
}
},
mouseEnter: function () {
clearInterval(this.interval);
},
mouseLeave: function () {
this.setInterVal();
},
setInterVa