<!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{
100px;
height: 100px;
background-color: red;
}
.box2{
100px;
height: 100px;
background-color: blue;
}
.box3{
100px;
height: 100px;
background-color: yellow;
}
.pic ul li{
list-style: none;
float: left;
margin-left: 10px;
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>