练习
一、1.红黄蓝三个按钮,点击不同的按钮可以切换一个200*200的矩形框对应的颜色
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .d1 { width:200px; height:200px; } </style> </head> <body> <div id="app"> <button style="color: red" @click="changeColourR">红</button> <button style="color: yellow" @click="changeColourY">黄</button> <button style="color: blue" @click="changeColourB">蓝</button> <p :class="c1" :style="color"></p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ color:{backgroundColor:''}, c1:'d1' }, methods:{ changeColourR(){ this.color.backgroundColor='red' }, changeColourY(){ this.color.backgroundColor='yellow' }, changeColourB(){ this.color.backgroundColor='blue' }, } }) </script> </html>
二、 切换颜色
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <p :class="c1" :style="color" @click="changeColor"></p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { color:{ width: '100px', height: '100px', backgroundColor: 'red' }, }, methods:{ changeColor(){ click_num+=1; if(click_num==1){ this.color.backgroundColor='pink' }else { if(click_num==2){ this.color.backgroundColor='green' }else { if (click_num==3){ this.color.backgroundColor='cyan'; click_num=0 } } } } } }) </script> </html>
