目前前端框架太多，接触过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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>v-if、v-else、v-show</title>
  6.     <script src="../js/vue.js"></script>
  7.     <!--copy from http://vuejs.org.cn/guide/-->
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <p v-if="willShow">显示显示显示</p>
  12.         <p v-else>隐藏隐藏隐藏隐藏</p>
  13.         <button @click="fn()">改变</button>
  14.     </div>
  15.     <script>
  16.         var vm=new Vue({
  17.             el:"#app",
  18.             data:{
  19.                 willShow:true
  20.             },
  21.             methods:{
  22.                 fn:function(){
  23.                     if(this.willShow==true){
  24.                         this.willShow=false;
  25.                     }else{
  26.                         this.willShow=true
  27.                     }
  28.                 }
  29.             }
  30.         });
  31.     </script>
  32. </body>
  33. </html>

vueJS简单的点击显示与隐藏的效果的更多相关文章

  1. js如何实现点击显示和隐藏表格

    js如何实现点击显示和隐藏表格 一.总结 一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...

  2. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  3. vue点击切换样式，点击切换地址栏，点击显示或者隐藏

    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...

  4. AngularJS中实现显示或隐藏动画效果的3种方式

    本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-anima ...

  5. jquery点击显示或隐藏

    点击第一个dd,给第一li添加class,点击第二个dd,给第二个li添加class,以此类推 $(function(){     $("dd > a").click(fun ...

  6. 一款js点击显示和隐藏的例子（pc，移动端通用）

    html部分: <div id="box"> <div id="box_title">标题</div> <div id ...

  7. layui 单选项 点击显示与隐藏

    同一个页面有多个单选按钮:https://blog.csdn.net/haibo0668/article/details/86220767

  8. css---点击显示和隐藏

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. android view控件的显示和隐藏动画效果

    // 显示动画 mShowAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO ...

随机推荐

  1. HTML的16个全局属性

    前面的话 在HTML中,属性能表达相当丰富的语义,而且属性也会额外提供很多实用的功能,HTML共支持16个常见的全局属性. HTML原有属性 accesskey 作用:浏览器用来创建激活或聚焦元素的快 ...

  2. MYSQL线程池总结(一)

    线程池是Mysql5.6的一个核心功能,对于服务器应用而言,无论是web应用服务还是DB服务,高并发请求始终是一个绕不开的话题.当有大量请求并发访问时,一定伴随着资源的不断创建和释放,导致资源利用率低 ...

  3. （转）清理AIX的/var文件系统大小

    在ROOTVG空间有限,且/var文件系统的空间已经足够大的情况下,/var文件系统空间快满了,这种情况怎么处理?IBM给了一个很好的处理流程: 使用find 命令检查在/var目录中所有大于1MB的 ...

  4. Asp.Net回车键触发Button的OnClick事件解决方案

    在aspx页面有textbox文本框,还有三个button按钮.启用textbox的TextChanged事件和button的click事件. 问题: 现在在textbox文本框输入完数据按“回车”后 ...

  5. Android Studio1.4.x JNI开发基础-基本环境配置

    从Eclipse时代到Android Studio普及,开发工具越来越好用.早些时候还需要安装Cygwin工具,从Android Studio1.3以后,在Android 环境开发JNI程序搭建开发环 ...

  6. qt 窗口动画

    窗口动画 编辑删除转载 2015-10-10 14:50:27 标签:qt渐变动画 一个应用程序通常包含多个动画,例如,你可能希望同时移动许多graphic items或者一个个按照串行的方式的移动他 ...

  7. Android 获取可靠的手机编码

    项目中出现了将设备和用户信息进行绑定的需求.最先想到的是IMEI串码和IMSI串码.手机登陆的时候一直都没有问题.换了一个平板中之后IMEI和IMSI串码都获取不到了.后来查了一下原因,是因为平板上是 ...

  8. 创建html元素

    如果我要创建一个div元素. 1.使用DOM对象创建: 使用document.createElement('div')方法创建元素. 2.使用JQuery创建: 使用$('<div>通过J ...

  9. Java泛型－类型擦除

    一.概述 Java泛型在使用过程有诸多的问题,如不存在List<String>.class, List<Integer>不能赋值给List<Number>(不可协变 ...

  10. 分享几个原生javascript面向对象设计小游戏

    一.序言 不知大家是不是和我一样,当初都有个梦想.学编程,就是想开发游戏.结果进入大学学习之后,才知道搞的是数据库应用程序开发!在此,本人就分享下业余时间做的几个小游戏吧!本打算想用winform或w ...