是盒子模型的，必须能改变其样式，不然那么多行级元素，没发改变样式，多枯燥啊；谢谢啊看来还是要懂英语啊

<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}}

个人感觉没这个需求的必要，可以实现点击的时候文字发生改变