65作业
-
点击的对应的按钮改变颜色
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #id_back { border: 1px solid black; height: 200px; width: 200px; } .c2{ background-color: red; } .c3{ background-color: yellow; } .c4{ background-color: blue; } </style> </head> <body> <div id="id_back" :class='cls'> </div> <br> <div> <button id="id_red" @click="changRed">红色</button> <button id="id_yellow" @click="changYel">黄色</button> <button id="id_blue" @click="changBlue">蓝色</button> </div> </body> <script src="js/vue.js"></script> <script> let bac = new Vue({ el: '#id_back', data: { cls: 'c1' } }) new Vue({ el: '#id_red', methods: { changRed() { bac.cls = 'c2' } } }) new Vue({ el: '#id_yellow', methods: { changYel() { bac.cls = 'c3' } } }) new Vue({ el: '#id_blue', methods: { changBlue() { bac.cls = 'c4' } } }) </script> </html> -
点击改变颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#wrap {
border: 1px solid black;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id="wrap" @click='changeColor':style={backgroundColor:color}>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#wrap',
data:{
count:0,
color:'write',
color_list:['pink','green','cyan']
},
methods:{
changeColor(){
// 记录点击次数
let n = this.count++
this.color = this.color_list[n % this.color_list.length]
}
}
})
</script>
</html>
