- 有 红 黄 蓝 三个按钮,以及一个200×200矩形框box, 点击不同的按钮, box的颜色会被切换成指定的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="js/vue.js"></script>
<style>
.d1 {
width: 50px;
height: 20px;
background: red;
}
.d2 {
width: 50px;
height: 20px;
background: yellow;
}
.d3 {
width: 50px;
height: 20px;
background: blue;
}
</style>
</head>
<body>
<div id="app">
<!--属性指令： v-bind:属性名="变量"
简写： :属性名="变量"-->
<p v-bind:style="pStyle"></p>
<p>
<button :class="c1" @click="pc1">红</button>
<button :class="c2" @click="pc2">黄</button>
<button :class="c3" @click="pc3">蓝</button>
</p>
<script>
new Vue({
el: '#app',
data: {
pStyle: {
width: '200px',
height: '200px',
backgroundColor: 'red'
},
c1: 'd1',
c2: 'd2',
c3: 'd3'
},
methods: {
pc1 () {
this.pStyle.backgroundColor = 'red'
},
pc2 () {
this.pStyle.backgroundColor = 'yellow'
},
pc3 () {
this.pStyle.backgroundColor = 'blue'
}
}
})
</script>
</div>
</body>
</html>
- 有一个200×200矩形框wrap,点击wrap本身,记录点击数,如果1次wrap为pink,2次warp为green,三次为cyan,4次重新回到pink,依次类推
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--属性指令： v-bind:属性名="变量"
简写： :属性名="变量"-->
<p v-bind:style="pStyle" @click="pc1"></p>
<p >点击次数:{{ c_sum }}</p>
<script>
let color = 'pink';
new Vue({
el: '#app',
data: {
pStyle: {
width: '200px',
height: '200px',
backgroundColor: 'red'
},
c_sum: 0
},
methods: {
pc1 () {
if (color == 'pink') {
this.pStyle.backgroundColor = 'pink';
this.c_sum += 1;
color = 'green'
} else if (color == 'green') {
this.pStyle.backgroundColor = 'green';
this.c_sum += 1;
color = 'cyan'
}else {
this.pStyle.backgroundColor = 'cyan';
this.c_sum += 1;
color = 'pink'
}
}
}
})
</script>
</div>
</body>
</html>
- 如图:图形初识左红右绿,点击一下变成上红下绿,再点击变成右红左绿,再点击变成下红上绿,依次类推
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="js/vue.js"></script>
<style>
.d1 {
position: absolute;
left: 50px;
width: 50px;
height: 100px;
background: red;
border-radius: 100px 0px 0px 100px;
}
.d1g {
position: absolute;
left: 50px;
width: 50px;
height: 100px;
background: green;
border-radius: 100px 0px 0px 100px;
}
.d2 {
position: absolute;
left: 100px;
width: 50px;
height: 100px;
background: green;
border-radius: 0px 100px 100px 0px;
}
.d2r {
position: absolute;
left: 100px;
width: 50px;
height: 100px;
background: red;
border-radius: 0px 100px 100px 0px;
}
.d3 {
position: absolute;
left: 50px;
width: 100px;
height: 50px;
background: red;
border-radius: 100px 100px 0px 0px;
}
.d3g {
position: absolute;
left: 50px;
width: 100px;
height: 50px;
background: green;
border-radius: 100px 100px 0px 0px;
}
.d4 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 50px;
background: green;
border-radius: 0px 0px 100px 100px;
}
.d4r {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 50px;
background: red;
border-radius: 0px 0px 100px 100px;
}
</style>
</head>
<body>
<div id="app">
<span :class="c1" @click="pc1"></span>
<span :class="c2" @click="pc1"></span>
<!-- <span :class="c3" ></span>-->
<!-- <span :class="c4"></span>-->
<script>
let num = 1
new Vue({
el: '#app',
data: {
c1: 'd1',
c2: 'd2',
// c3: 'd3',
// c4: 'd4',
is_true: true
},
methods: {
pc1 () {
if (num == 1) {
this.c1 = 'd3';
this.c2 = 'd4';
num += 1
}else if (num == 2) {
this.c1 = 'd1g';
this.c2 = 'd2r';
num += 1
}else {
this.c1 = 'd3g';
this.c2 = 'd4r';
num = 1
}
}
}
})
</script>
</div>
</body>
</html>
- 让图片能自动旋转
