作业1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p :style="myStyle"></p>
<button @click="f1">红</button>
<button @click="f2">黄</button>
<button @click="f3">蓝</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
myStyle:{
width:'200px',
height:'200px',
backgroundColor:'black'
}
},
methods:{
f1(){
this.myStyle.backgroundColor='red'
},
f2(){
this.myStyle.backgroundColor='yellow'
},
f3(){
this.myStyle.backgroundColor='blue'
}
}
})
</script>
</html>作业2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p :style="myStyle" @click="f1"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
num:0,
myStyle:{
width:'200px',
height:'200px',
backgroundColor:'black'
}
},
methods:{
f1(){
this.num+=1
if (this.num%3==1){
this.myStyle.backgroundColor='pink'
}else if(this.num%3==2){
this.myStyle.backgroundColor='green'
}else{
this.myStyle.backgroundColor='cyan'
}
}
}
})
</script>
</html>作业3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div :style="myStyle2" @click="f1">
<div :style="myStyle" ></div>
<div :style="myStyle1"></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
num:0,
myStyle:{
width:'50px',
height:'100px',
backgroundColor:'red',
borderRadius:'50px 0 0 50px',
float:'left'
},
myStyle1:{
width:'50px',
height:'100px',
backgroundColor:'yellow',
borderRadius:'0 50px 50px 0',
float:'left'
},
myStyle2:{
position:'fixed',
},
},
methods:{
f1(){
this.num+=1
if (this.num%4==1){
this.myStyle.width='100px';
this.myStyle1.width='100px';
this.myStyle.height='50px';
this.myStyle1.height='50px';
this.myStyle.borderRadius='50px 50px 0 0';
this.myStyle1.borderRadius='0 0 50px 50px'
this.myStyle.float='none'
this.myStyle1.float='none'
}else if (this.num%4==2){
this.myStyle.width='50px';
this.myStyle1.width='50px';
this.myStyle.height='100px';
this.myStyle1.height='100px';
this.myStyle.borderRadius='50px 0 0 50px';
this.myStyle1.borderRadius='0 50px 50px 0'
this.myStyle.float='left'
this.myStyle1.float='left'
this.myStyle.backgroundColor='yellow'
this.myStyle1.backgroundColor='red'
}else if (this.num%4==3){
this.myStyle.width='100px';
this.myStyle1.width='100px';
this.myStyle.height='50px';
this.myStyle1.height='50px';
this.myStyle.borderRadius='50px 50px 0 0';
this.myStyle1.borderRadius='0 0 50px 50px'
this.myStyle.float='none'
this.myStyle1.float='none'
this.myStyle.backgroundColor='yellow'
this.myStyle1.backgroundColor='red'
}else{
this.myStyle.width='50px';
this.myStyle1.width='50px';
this.myStyle.height='100px';
this.myStyle1.height='100px';
this.myStyle.borderRadius='50px 0 0 50px';
this.myStyle1.borderRadius='0 50px 50px 0'
this.myStyle.float='left'
this.myStyle1.float='left'
this.myStyle.backgroundColor='red'
this.myStyle1.backgroundColor='yellow'
}
}
}
})
</script>
</html>