vueJS簡單的點擊顯示與隱藏的效果

本文轉載自查看原文 2016-04-28 15:04 8855 JAVASCRIPT/ HTML5/ HTML

目前前端框架太多，接觸過angular、ember，現在開始倒騰vue

此處用到v-if、v-else、v-show，v-if或讓元素不在DOM上，v-show只是改變display:block屬性，感覺v-if好

感覺跟適合、

演示效果:http://wjf444128852.github.io/demo/myVue/demo/demo9.html

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JQ 簡單動畫顯示隱藏效果 vuejs組件,按鈕點擊效果 jQuery點擊按鈕實現div的隱藏和顯示切換效果 JS原生隱藏顯示圖片,點擊切換圖片的效果 Jquery 同個類名中點擊的顯示其他隱藏的效果點擊自動顯示/隱藏DIV代碼。(簡單實用） layui 點擊顯示與點擊隱藏 js點擊顯示隱藏 jQuery效果--隱藏和顯示 HTML實用案例（1）—— 左側菜單，右側內容的布局（帶左側菜單點擊隱藏顯示效果）