v-bind
v-bind，为元素绑定属性；完整写法是v-bind:属性名=“”
简写 :属性名=“”
需要动态的增删class建议使用对象的方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind</title>
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="ImgSrc" :title="Imgtitle" :class="{active:isclass}" @click="Changeclass">
<img :src="ImgSrc" v-bind:title="Imgtitle+'!!!!'" :class="isclass?'active':''" @click="Changeclass">
<input type="button" value="改变图片" @click="Changeimg">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
ImgSrc:"../img/1.jpg",
Imgtitle:"陈建",
isclass:false
},
methods:{
Changeclass:function(){
this.isclass=!this.isclass
},
Changeimg:function(){
for(i=1;i<=4;i++){
this.ImgSrc="../img/"+i+".jpg";
}
}
}
})
</script>
</body>
</html>
|
图片切换小练习
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片切换</title>
<style>
body{
text-align: center;
}
#app{
margin: 0 auto;
}
.left{
position: absolute;
left: 200px;
top: 300px;
}
.right{
position: absolute;
right: 200px;
top: 300px;
}
</style>
</head>
<body>
<div id="app">
<img :src="ImgArr[index]">
<a href="javascript:void(0)" v-show="index!=0" @click="reduceImg" class="left">
<img src="../img/left.png" >
</a>
<a href="javascript:void(0)" v-show="index<ImgArr.length-1" @click="AddImg" class="right">
<img src="../img/right.png" >
</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
ImgArr:["../img/1.jpg",
"../img/2.jpg",
"../img/3.jpg",
"../img/4.jpg",],
index:2
},
methods:{
AddImg:function(){
this.index++;
},
reduceImg:function(){
this.index--;
}
}
})
</script>
</body>
</html>
|
计时器小练习
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="-" @click="reduce">
<span>{{num}}</span>
<input type="button" value="+" @click="add">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
num:0
},
methods:{
add:function(){
if(this.num<10){
this.num++;
}else{
alert("别点啦！最大啦")
}
},
reduce:function(){
if(this.num>0){
this.num--;
}else{
alert("别点啦！最小啦")
}
}
}
})
</script>
</body>
</html>
|