求解button的文字属性

来源:2-6 v-if, v-show与v-for指令

鹿年轻

2018-09-11 22:17

请问button上的文字属性怎么随着show的属性改变啊 比如show是true的时候显示文字是隐藏 false的时候显示文字是显示

写回答 关注

5回答

  • 慕移动9181930
    2022-03-25 01:54:46

    是盒子模型的,必须能改变其样式,不然那么多行级元素,没发改变样式,多枯燥啊;

  • 桐谷和人丶
    2019-02-15 11:09:35

    <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的值

  • 天人合一lhy
    2018-09-18 13:30:04
    <button @click="show = !show"><span v-if="show">隐藏</span><span v-else>显示</span></button>
    data () {return {show: true}}


    她没长发 回复鹿年轻

    这个是可以的啊

    2018-11-01 14:53:22

    共 2 条回复 >

  • 天人合一lhy
    2018-09-18 13:26:35

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

    data () {return {show: true}}


  • 幕布斯9009170
    2018-09-12 10:41:36

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

    鹿年轻

    不是需求,只是个人的一个想法

    2018-09-12 12:05:19

    共 1 条回复 >

vue2.5入门

快速理解Vue编程理念上手Vue2.0开发。

146172 学习 · 655 问题

查看课程

相似问题