有時候，我們在做項目的時候，想通過某個按鈕來改變某個div樣式，那么可以通過以下代碼實現：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<style type="text/css">
.change {
width: 500px;
height: 500px;
background-color: #4f77aa;
text-align: center;
line-height: 100px;
font-size: 40px;
color: white;
}
.changs {
width: 700px;
height: 700px;
background-color: rgb(155, 59, 147);
text-align: center;
line-height: 100px;
font-size: 40px;
color: white;
}
</style>
</head>
<body>
<div id="demo">
<div :class="[isActive?'change':'changs']">
通過點擊按鈕此處樣式會發生改變
</div>
<h1 :style="{display:activeDisplay}">
大家好！ 當按鈕被點擊時，我會和你捉迷藏哦！
</h1>
<button @click="changeIt">點擊改變</button>
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
isActive: true,
activeDisplay: 'block'
},
methods: {
changeIt: function() {
this.isActive = !this.isActive;
if (this.isActive == true) {
this.activeDisplay = 'block';
} else {
this.activeDisplay = 'none';
}
}
}
})
</script>
</body>
</html>
划重點，我們需要給按鈕傳入一個方法，所以先要通過<button @click="changeIt">點擊改變</button>里的@click="changeIt">來綁定該按鈕，並調用changeIt方法，此外，還需要在你想要改變樣式的div里做綁定，即<div :class="[isActive?'change':'changs']">通過點擊按鈕此處樣式會發生改變</div>，而想要拉伸div寬度和高度，則需要用到<h1 :style="{display:activeDisplay}">大家好！ 當按鈕被點擊時，我會和你捉迷藏哦！</h1>，此時，你已經做好了第一步，即綁定元素，接下來，我們建立參數和方法，實現這一效果，先在data里寫入兩個參數並給他們賦值isActive: true,，activeDisplay: 'block'；然后，我們來寫方法：
methods: {
changeIt: function() {
this.isActive = !this.isActive;
if (this.isActive == true) {
this.activeDisplay = 'block';
} else {
this.activeDisplay = 'none';
}
}
}
然后，讓我們來看看效果吧!
好了，現在打開編輯器和瀏覽器快樂的嘗試吧！！！