AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

vueJS简单的点击显示与隐藏的效果【实现代码】

51自学网 http://www.wanshiok.com
vue,JS,点击显示,隐藏

目前前端框架太多,接触过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简单的点击显示与隐藏的效果【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持wanshiok.com。


vue,JS,点击显示,隐藏  
上一篇:javascript实现下雪效果【实例代码】  下一篇:javascript的列表切换【实现代码】