<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
}
.box3{
width: 100px;
height: 100px;
background-color: yellow;
}
.pic ul li{
list-style: none;
float: left;
margin-left: 10px;
width: 30px;
background-color: pink;
}
</style>
</head>
<body>
<div id="okk">
<span v-bind:title=\'time\'>鼠标悬停几秒后当前时间</span>
<h4 v-bind:title=\'title\'>学习vue</h4>
<img v-bind:src="imgSrc" alt="">
</div>
<hr>
<hr>
<div id="okk2">
<div v-bind:class={box1:isactive}></div>
</div>
<hr>
<!-- //数据驱动视图 -->
<div id="okk3">
<div class=\'box1\' v-bind:class=\'{box2:isBlue}\'></div>
<button @click=\'changecolor\'>切换</button>
<button v-on:click=\'count+=1\'>加{{count}}</button>
<div class="pic">
<img :src="currentSrc" @mouseenter=\'closeTimer\' @mouseleave=\'startTimer\'>
<ul>
<li v-for=\'(item,index) in imgArr\' v-bind:style="{ color: activeColor }" @click=\'changePicture(item)\'>
{{index+1}}
</li>
</ul>
<button @click=\'preImg\'>上一页</button>
<button @click=\'nextImg\'>下一页</button>
</div>
</div>
<script>
new Vue({
el:\'#okk\',
data:{
time:`页面加载于${new Date().toLocaleString()}`,
title:\'vue\',
imgSrc:\'./img/11.jpg\'
}
})
new Vue({
el:\'#okk2\',
data:{
isactive:true
}
})
new Vue({
el:\'#okk3\',
data:{
isBlue:true,
count:0,
imgArr:[
{id:1,src:\'./img/22.jpg\'},
{id:1,src:\'./img/33.jpg\'},
{id:1,src:\'./img/44.jpg\'},
{id:1,src:\'./img/55.jpg\'},
],
currentSrc:\'./img/22.jpg\',
currentIndex:0,
activeColor:\'red\',
timer:null
},
created(){
// 获取cookie session
this.timer = setInterval(this.nextImg,2000)
},
methods:{
changecolor:function () {
this.isBlue = !this.isBlue
},
changePicture:function (item) {
this.currentSrc = item.src;
},
nextImg(){
if(this.currentIndex==this.imgArr.length-1){
this.currentIndex=-1;
}
this.currentIndex++;
this.currentSrc = this.imgArr[this.currentIndex].src;
},
preImg(){
if(this.currentIndex==0){
this.currentIndex=this.imgArr.length;
}
this.currentIndex--;
this.currentSrc = this.imgArr[this.currentIndex].src;
},
closeTimer(){
clearInterval(this.timer);
},
startTimer(){
this.timer = setInterval(this.nextImg,2000)
}
},
})
</script>
</body>
</html>