你的位置:首页 > 软件开发 > Java > vueJS简单的点击显示与隐藏的效果

vueJS简单的点击显示与隐藏的效果

发布时间:2016-04-28 16:00:03
目前前端框架太多,接触过angular、ember,现在开始倒腾vue此处用到v-if、v-else、v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性,感觉v-if好感觉跟适合、演示效果:http://wjf444128852.git ...

目前前端框架太多,接触过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='/images/loading.gif' data-original="../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简单的点击显示与隐藏的效果

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。