目前前端框架太多，接触过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. Geometry Surface of OpenCascade BRep

    Geometry Surface of OpenCascade BRep eryar@163.com 摘要Abstract:几何曲面是参数表示的曲面 ,在边界表示中其数据存在于BRep_TFace中, ...

  2. 10034 - Freckles 克鲁斯克尔最小生成树！～

    /* 10034 - Freckles 克鲁斯克尔最小生成树!- */ #include<iostream> #include<cstdio> #include<cmat ...

  3. java接口的应用举例

    /* 接口的理解: 接口就是前期定义一个规则!某一个类A,为了扩展自身的功能,对外提供这个接口,后期只要是符合这个接口(规则) 的类(这个类是接口的子类),将子类对象的引用传递给类A中方法(方法中的参 ...

  4. ASP.NET将Session保存到数据库中

    因为ASP.NET中Session的存取机制与ASP相同,都是保存在进行中, 一旦进程崩溃,所有Session信息将会丢失,所以我采取了将Session信息保存到SQL Server中,尽管还有其它的 ...

  5. Android基于mAppWidget实现手绘地图（九）–如何处理地图对象的touch事件

    为了响应touch事件,需要设置OnMapTouchListener 示例: private void initMapEventsListener() { mapWidget.setOnMapTouc ...

  6. Testing - Tips

    1 --- 冒烟测试.可用性测试和回归测试的区别? 在测试领域中,冒烟测试(smoke test).可用性测试(sanity test)和回归测试(regression test)彼此之间很相似,范围 ...

  7. 12个来自 Codrops 的创新交互和动画效果

    产品的用户体验是否被用户所接受,很大一部分取决于交互界面的设计,交互界面设计是整个产品设计中的核心,对于产品品质有着决定性的影响.这里集合了12个来自 Codrops 的创新的界面交互和动画效果,值得 ...

  8. Android之Activity的生命周期

    PS:写一发关于Activity的生命周期,也算是面试的重点内容. 学习内容: 1.Activity的生命周期 2.面对多种情况的时候Activity的生命周期 3.onSaveInstanceSta ...

  9. [SDK2.2]Windows Azure Virtual Network (4) 创建Web Server 001并添加至Virtual Network

    <Windows Azure Platform 系列文章目录> 在上一章内容中,笔者已经介绍了以下两个内容: 1.创建Virtual Network,并且设置了IP range 2.创建A ...

  10. Canny边缘检测算法原理及C语言实现详解

    Canny算子是John Canny在1986年提出的,那年老大爷才28岁,该文章发表在PAMI顶级期刊上的(1986. A computational approach to edge detect ...