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

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. Android点击效果

    我们在开发网站时,会发现当我们添加<a/>标签后,标签有一个点击效果,比如颜色变化,这样开看起来用户体验会很棒,那么在我们的Android开发中如何加入这样的效果呢?本篇就为大家揭开它的神 ...

  2. poj 1724ROADS（bfs和dfs做法）

    /* dfs比较好想,就是测试数据的问题,导致在遍历边的时候要倒着遍历才过! */ #include<iostream> #include<cstdio> #include&l ...

  3. C#基础-----面向对象

    C#基础-----面向对象(一) 分类: C#基础2015-06-08 14:10 2人阅读 评论(0) 收藏 举报 1,面向对象 什么是面向对象?一个分析问题的方式(增强了程序的可扩展性) 几个名词 ...

  4. Spark入门实战系列--8.Spark MLlib（下）--机器学习库SparkMLlib实战

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .MLlib实例 1.1 聚类实例 1.1.1 算法说明 聚类(Cluster analys ...

  5. REST API出错响应的设计

    REST API应用很多,一方面提供公共API的平台越来越多,比如微博.微信等:一方面移动应用盛行,为Web端.Android端.IOS端.PC端,搭建一个统一的后台,以REST API的形式提供服务 ...

  6. JS实现base64加密解密

    JS实现base64加密解密 转载自http://blog.csdn.net/fengzheng0306/archive/2006/04/25/676055.aspx 方法一: <HTML> ...

  7. Java之HashMap在多线程情况下导致死循环的问题

    PS:不得不说Java编程思想这本书是真心强大.. 学习内容: 1.HashMap<K,V>在多线程的情况下出现的死循环现象   当初学Java的时候只是知道HashMap<K,V& ...

  8. 你必须知道ASP.NET知识------从IIS到httpmodule(第一篇)

    一.写在前面 最近有时间,顺便将这系列洗完,接着上文:IIS各个版本知识总结 这篇文章原本计划写到HttpHandler为止,但限于篇幅就写到httpmodule 本文有不足之处,求指正,希望我能将它 ...

  9. SQL 聚合函数

    SQL聚合函数 MAX---最大值 MIN--最小值 AVG--平均值 SUM--求和 COUNT--记录的条数 EXample: --从MyStudent表中查询最大年龄,最小年龄,平均年龄,年龄的 ...

  10. Git 查看文件的历史

    用惯了tfs,刚一接触git感觉很不顺手,特别是一些很基本的操作,用起来都怪怪的(可能是不习惯命令行的原因吧).下面把查看文件历史的用例小结一下. 查看某个文件的修改历史 在git中查看历史的命令主要 ...