目前前端框架太多，接触过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. 深入理解CSS背景

    前面的话 背景和字体一样,是一个复合属性,而且它是一个使用频率很高的属性.在CSS3中,背景属性在保持以前用法的同时,增加了新的相关属性.本文将详细介绍关于背景的知识 背景颜色 背景色backgrou ...

  2. Python - Tips

    01 - input与raw_input的区别 input() #可以直接输入数字,但输入字符的要用引号''或者双引号"" raw_input() #将所有的输入都直接当作一串字符 ...

  3. 经验总结：HTTP返回505错误小记

    昨天调试代码的时候,用http请求一个图片,返回的结果为如下: HTTP/1.1 505 HTTP Version Not Supported Server: Apache-Coyote/1.1 Da ...

  4. sublime Text3使用笔记

    转载:http://blog.csdn.net/u012771929/article/details/30030249 目录: 1.setting 安装插件,package control ,Emme ...

  5. 我如何调优SQL Server查询

    我是个懒人,我只想干尽可能少的活.当我干活的时候我不想太多.是,你没看错,这看起来很糟糕,作为一个DBA这很不合格.但在今天的文章里,我想给你展示下,当你想对特定查询创建索引设计时,你如何把你的工作和 ...

  6. 深入分析MVC中通过IOC实现Controller依赖注入的原理

    这几天利用空闲时间,我将ASP.NET反编译后的源代码并结合园子里几位大侠的写的文章认真的看了一遍,收获颇丰,同时也摘要了一些学习内容,存入了该篇文章:<ASP.NET运行机制图解>,在对 ...

  7. CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins

    前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...

  8. 如果简单的记录,就可以为这个世界创造更多的财富,那么还有什么理由不去写博客呢? — 读<<黑客与画家>> 有感

    上一次博文发文时间是2016.1.15,7个月已经过去了.最近读了一本<>的书,对我触动挺大的!里面有关于技术趋势的探讨,也有关于人生和财富的思考! 开始更新iOS122的文章的初衷是,聚 ...

  9. noip模拟赛 好元素 哈希表的第一题

    这是一道关于 题2好元素 2s [问题描述] 小A一直认为,如果在一个由N个整数组成的数列{An}中,存在以下情况: Am+An+Ap = Ai (1 <= m, n, p < i < ...

  10. HTML基础—插曲

    HTML基础学习 1:我们在网上添加图片的时候最好是缩略图,而不是直接在代码中限制图片的大小.可以为了用户减少流量.Alt=""属性是为了让图片在现实不出来时显示的文字,Title ...