目前前端框架太多，接触过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. struts2拦截器

    一.自定义拦截器 struts2拦截器类似于servlet过滤器 首先定义一个拦截器这个拦截器实现了Interceptor接口: package cn.orlion.interceptor; impo ...

  2. unity3d中 刚体(Rigidbody) 碰撞体(Collider) 触发器(Is Trigger)

      刚体(Rigidbody)的官方(摘自Unity3d的官方指导书<Unity4.x从入门到精通>)解释如下: Rigidbody(刚体)组件可使游戏对象在物理系统的控制下来运动,刚体可 ...

  3. Android自定义ImageView圆形头像

    效果图: 代码如下: RoundImageView.java import cn.comnav.evaluationsystem.R; import android.content.Context; ...

  4. Javascript中的正则表达式

    Javascript中的正则表达式 刚开始接触正则表达式的时候,觉得这是个很死板的东西(没办法,计算机不能像人眼一样能很快的辨认出我们需要的结果,它需要一定的规则来对它进行限制),了解的越多,发现这个 ...

  5. LeetCode - 51. N-Queens

    51. N-Queens Problem's Link ------------------------------------------------------------------------ ...

  6. 写给自己的 程序集&msil 扫盲

    嘴上不说 心里却想MD 这家伙在博客园装了这么久的高手 竟然连这都不会 ,我去噢. 程序集签名 .net 下 “程序集” 什么东东 ,反正就是听着挺牛x的,其实就是指“一堆程序”从我们传统的C++封装 ...

  7. C语言学习008:标准错误

    在上一节中的数据文件中(C语言学习007:重定向标准输入和输出),如果文件中的数据包含非法数据,如何让程序显示一条错误的提示消息呢?就需要用到标准错误 #include <stdio.h> ...

  8. Node.js系列之ubuntu环境搭建

    ctrl+alt+t打开终端(命令行) 一.准备Node.js所依赖的包(g++,curl,python等) sudo apt-get install g++ curl libssl-dev apac ...

  9. ASP.NET MVC 请求流程

    一.应用程序启动 1.Application_Start方法,程序启动 2.RegisterRoutes方法,注册路由 3.System.Web.Mvc.RouteCollectionExtensio ...

  10. mvc jquery 修改 viewbag

    [HttpGet]        public ActionResult Modify(int id)        {            Books mod=db.Books.Where(b = ...