点击显示或隐藏

2019-11-06 05:35:32 -0500

vue点击切换显示隐藏

原本可以成为Google、Facebook的“爸爸”，或者微软的“儿子”，最后却像“孙子”一样被贱卖，沦为互联网浪潮的“弃子”。

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue点击切换显示隐藏</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="example">
        <button v-text="btnText" @click="showToggle"></button>
        <p v-show="isShow">原本可以成为Google、Facebook的“爸爸”，或者微软的“儿子”，最后却像“孙子”一样被贱卖，沦为互联网浪潮的“弃子”。</p>
    </div>
    <script type="text/javascript">
    new Vue({
        el:"#example",
        data:{
            btnText:"隐藏",
            isShow:true
        },
        methods:{
            showToggle:function(){
                this.isShow = !this.isShow
                if(this.isShow){
                    this.btnText = "隐藏"
                }else{
                    this.btnText = "显示"
                }
            }
        }
    })
    </script>
</body>
</html>

人命太不值钱

«Newer Older»

----Comments(2)----
@yucho | @ at 2020-04-08 06:19:
有人用css直接实现此效果

鱼判断熊掌 (@pd0) | @ at 2019-11-06 08:44:
中国什么时候能把人权平等提高起来？

Back to home

Subscribe | Register | Login | N