<!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. Emacs 入门(https://www.zybuluo.com/eqyun/note/40788)

    下载地址 基本操作(C=Ctrl, M=Alt) C-f 向右移动一个字符 C-b 向左移动一个字符 C-n 移动到下一行 C-p 移动到上一行 M-f 向右移动一个词[对中文是移动到下一个标点符号] ...

  2. 构建之法——homework1：问题思考

    1.我看了第一章概论,1.2.4 软件工程的目标——创造“足够好”的软件,其中提到了什么是好的软件?  软件工程的一个要素就是把软件的Bug都消灭掉的过程. 提问:我们知道Bug是不可能完全消灭掉的, ...

  3. idea在debug模式下的启动特别慢？

    程序执行到这里时,一直卡着不动? 原因可能是在方法上打了断点导致的: 将方法上的断点去掉,点击[Done]即可.

  4. IPv6系列-彻底弄明白有状态与无状态配置IPv6地址

    深入研究自动分配IPv6地址的Stateless(无状态)与Stateful(有状态)方式 小慢哥的原创文章,欢迎转载 目录 ▪ 一. Link-Local Address的生成方式 ▪ 二. Glo ...

  5. [ngclass]、[ngstyle]、管道

    [ngclass] 动态改变一个元素的class ts: public classcolor:boolean=false; public list:any = [{title:"新闻1&qu ...

  6. Docker 本地私有仓库搭建：

    Docker 本地私有仓库搭建: 创建数据卷目录: mkdir /home/sky/registry 用registry镜像启动容器: docker run -d -p 5000:5000 -v /h ...

  7. electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 子进程管理 electron教程(三): ...

  8. linux登录后出现-bash-4.1$

    linux登录后有时候会出现-bash-4.1$ 造成这样的原因: 与这个用户有关环境变量没了,有关的文件被删除.也就是用户的家目录下面 .bash_profile .bashrc 被删除. 解决办法 ...

  9. 微人事 star 数超 10k，如何打造一个 star 数超 10k 的开源项目

    看了下,微人事(https://github.com/lenve/vhr)项目 star 数超 10k 啦,松哥第一个 star 数过万的开源项目就这样诞生了. 两年前差不多就是现在这个时候,松哥所在 ...

  10. e课表项目第二次冲刺周期第七天

    昨天干了什么? 昨天我查找相关的资料实现对之前的信息连接数据库进行显示,完成修改的功能,并且返回到数据库当中.然后下午,我和我们小组的成员,讨论了第二个界面的具体功能和布局,我们一致同意,引用之前的第 ...