Vue.js 点击按钮显示 / 隐藏内容实例

html 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
  <style>
  </style>
</head>
<body>
   <div id="example">
        <button v-text="btnText" @click="showToggle"></button>
        <p v-show="isShow"> 原本可以成为 Google,Facebook 的 "爸爸", 或者微软的 "儿子", 最后却像 "孙子" 一样被贱卖, 沦为互联网浪潮的 "弃子".</p>
    </div>
</body>
<script>
new vue({
        el:"#example",
        data:{
            btnText:"隐藏",
            isShow:true
        },
        methods:{
            showToggle:function(){
                this.isShow = !this.isShow
                if(this.isShow){
                    this.btnText = "隐藏"
                }else{
                    this.btnText = "显示"
                }
            }
        }
    })
</script>
</html>

来源: http://www.qdfuns.com/article/17978/60e9d30cfec721b458902d5c53b8ec71.html

与本文相关文章

暂无,快来抢沙发吧！

Vue.js 点击按钮显示 / 隐藏内容 实例

与本文相关文章

Vue.js 点击按钮显示 / 隐藏内容实例