<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

            <div v-if="vip==1">

                <h1>这是VIP1的内容</h1>

            </div>

            <div v-else-if='vip==2'>

                <h1>这是VIP2的内容</h1>

            </div>

            <div v-else>

                <h1>这是普通用户的内容</h1>

            </div>

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el:'#app',

                data:{

                    vip:2

                },

                methods:{

                }

            })

        </script>

    </body>

</html>

vue条件渲染2的更多相关文章

  1. Vue条件渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素 注意else只能跟在v-if或者v-s ...

  2. Vue#条件渲染

    根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定 ...

  3. [vue]vue条件渲染v-if(template)和自定义指令directives

    条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <di ...

  4. vue 条件渲染与列表渲染

    本文是对官方文档的整理 因为 v-if 是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v ...

  5. (尚008)Vue条件渲染

    1.test008.html <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  6. vue 条件渲染 v-if v-show

    1.要点 1.1 v-if     条件性地渲染一块内容 <h1 v-if="awesome">Vue is awesome!</h1> 附带  /  v- ...

  7. vue 条件渲染v-if v-show

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. vue 条件渲染方式

    1.通过class绑定 <div :class="{'div-class': this.align == 'center'}"></div> 对应的css ...

  9. vue.js选择if（条件渲染）详解

    vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. 基于操作系统原理的Linux 系统的安装

    一.实验目的 1．了解Linux操作系统的发行版本. 2．掌握Red Hat Linux 9.0的安装方法. (可用Red Hat Linux 5.0版本替代9.0版本) 3．了解Linux其他版本( ...

  2. idea 设置jvm参数

    使用IDEA进行JVM参数设置: Run->Edit Configurations... 进入之后: 之后就可以运行代码测试,可以看到控制台打印的信息: 说明: -Xms:20M 初始化堆内存大 ...

  3. centos 7 常用yum源配置

    使用centos系统最熟悉的莫过于yum命令,yum命令可以让安装软件变得那么简单,编译安装的依赖关系大部分都会解决. 工具/原料   centos 7 wget yum 方法/步骤     什么是y ...

  4. Onethink上传服务器后登录不了的问题

    本地修改完Onethink后上传到服务器,进入后台登录的时候,发现输入用户名和密码和验证码后,第一次点击登录没反应,第二次点击提示验证码错误. 经过一研究发现 onethink 的登陆是通过API连接 ...

  5. gitbook 入门教程之从零到壹发布自己的插件

    什么是插件 Gitbook 插件是扩展 Gitbook 功能的最佳方式,如果 Gitbook 没有想要的功能或者说网络上也没有现成的解决方案时,那么只剩下自食其力这条道路,让我们一起来自力更生开发插件 ...

  6. 从无到有，构建GIS + BIM大厦

    声明:本文是一个系列原创(作者在GIS+BIM行业已有从业15年有余,还是个行业的小学生,文章内容不免有错误或者不当之处,敬请理解),旨在通过这个系列打造一个高性能,高可扩展的GIS+BIM框架,抛砖 ...

  7. Web调用Linux客户端remmina运维

    相信你遇到过这样的场景,在浏览器网页中点击QQ图标咨询,就能唤起本机的装的qq或tim,下载百度网盘的资源的时候,点击链接浏览器会启动本地百度云进行下载.   最近因为项目需要,也要实现类似的操作,不 ...

  8. Flutter中TabBarView切换状态保存

    TabBarView 类似于Android中的viewPager,但是默认是没有实现切换分页状态保存的.估计是出于节约内存的原因吧. 发现这个问题的时候,搜索了一下全网.大致就两种解决方案,1是修改源 ...

  9. redis系列之------简单的动态字符串(SDS)

    前言 Redis 没有直接使用 C 语言传统的字符串表示(以空字符结尾的字符数组,以下简称 C 字符串), 而是自己构建了一种名为简单动态字符串(simple dynamic string,SDS)的 ...

  10. B-线性代数-距离公式汇总

    目录 距离公式汇总 一.欧式距离 二.曼哈顿距离 三.闵可夫斯基距离(Minkowski distance) 更新.更全的<机器学习>的更新网站,更有python.go.数据结构与算法.爬 ...