vueJS簡單的點擊顯示與隱藏的效果(實現代碼)

字號： 小 中 大


    下面小編就為大家?guī)硪黄獀ueJS簡單的點擊顯示與隱藏的效果【實現代碼】。小編覺得挺不錯的，現在分享給大家，一起跟隨小編過來看看吧
    目前前端框架太多，接觸過angular、ember，現在開始倒騰vue
    此處用到v-if、v-else、v-show，v-if或讓元素不在DOM上，v-show只是改變display:block屬性，感覺v-if好
    感覺跟適合、
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>v-if、v-else、v-show</title>
      <script src="../js/vue.js"></script>
      <!--copy from http://vuejs.org.cn/guide/-->
    </head>
    <body>
      <div id="app">
        <p v-if="willShow">顯示顯示顯示</p>
        <p v-else>隱藏隱藏隱藏隱藏</p>
        <button @click="fn()">改變</button>
      </div>
      <script>
        var vm=new Vue({
          el:"#app",
          data:{
            willShow:true
          },
          methods:{
            fn:function(){
              if(this.willShow==true){
                this.willShow=false;
              }else{
                this.willShow=true
              }
            }
          }
        });
      </script>
    </body>
    </html>
    以上這篇vueJS簡單的點擊顯示與隱藏的效果【實現代碼】就是小編分享給大家的全部內容了，希望能給大家一個參考