是盒子模型的，必須能改變其樣式，不然那么多行級元素，沒發改變樣式，多枯燥??；謝謝啊看來還是要懂英語啊

<div id="div1">

? ? <h1 v-show="show">{{ msg }}</h1>

? ? <button @click="btn_click">{{ btn_text }}</button>

</div>

<script type="text/javascript">

? ? var div1 = new Vue({

? ? ? ? el: "#div1",

? ? ? ? template: "",

? ? ? ? data: {

? ? ? ? ? ? msg: "Hello World",

? ? ? ? ? ? show: true,

? ? ? ? ? ? btn_text: "隱藏"

? ? ? ? },

? ? ? ? methods: {

? ? ? ? ? ? btn_click: function () {

? ? ? ? ? ? ? ? this.show = !this.show;

? ? ? ? ? ? ? ? if (this.show) {

? ? ? ? ? ? ? ? ? ? this.btn_text = "隱藏";

? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? this.btn_text = "顯示";

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }

? ? });

</script>

button的內容用一個數據變量綁定（btn_text），監聽按鈕button的點擊事件，事件里判斷h1的狀態（隱藏顯示），也就是show的值，以此來修改button的test內容，也就是btn_text的值

<button?@click="show?=?!show"><span?v-if="show">隱藏</span><span?v-else>顯示</span></button>

data?()?{return?{show:?true}}

<button @click="show = !show"><span v-if="show">按鈕內容</span></button>

data?()?{return?{show:?true}}

個人感覺沒這個需求的必要，可以實現點擊的時候文字發生改變