45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:vueJS简单的点击显示与隐藏效果如何?

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

2016-07-30 20:54:00 来源:www.45fan.com 【

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

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


本文地址:http://www.45fan.com/bcdm/60391.html
Tags: 点击 简单 vueJS
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部