<!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. CentOS 8 都发布了，你还不会用 nftables？

    原文链接:CentOS 8 都发布了,你还不会用 nftables? 如果你没有生活在上个世纪,并且是云计算或相关领域的一名搬砖者,那你应该听说最近 CentOS 8 官方正式版已经发布了,CentO ...

  2. redis分布式锁-基本概念与实现方式对比

    1.redis中使用WATCH实现锁机制,是最次之的方式.WATCH只会在数据被其他客户端抢先修改了的情况下,“通知”执行了这个命令的客户端,而不会阻止其他客户端对数据进行修改.此类锁成为“乐观锁” ...

  3. Angular Cli 升级到最新版本

    1. 卸载当前版本 npm uninstall -g angular-cli 2. 清除未卸载干净的angular-cli缓存 npm cache clean -f 3. 到安装目录查看是否卸载干净 ...

  4. 什么是VR中的Locomotion？

    Locomotion,本文中我称之为移位,是VR研究中最重要的话题之一.因为它属于VR中三大元老级操作(Selection选择,Manipulation操纵物体,Locomotion移位),其中,前两 ...

  5. VR中的Redirection

    在虚拟现实(Virtual Reality,VR)中,很重要的一点就是用户的在虚拟环境中的漫游(navigation).除了固定视点的VR电影,一般的VR应用,特别是游戏或者其他交互式的应用,都会依赖 ...

  6. kotlin系列文章 --- 3.条件控制

    if表达式 一个if语句包含一个布尔表达式和一条或多条语句 // 基础用法 var max = a if (a<b) max = b // 加上else var max: Int if(a> ...

  7. spark针对web日志正则匹配

    针对于web日志做分析是学习spark常用练习项目.此文介绍web日志正则匹配相关小提示.  实例测试 从网上找了一个access日志案列 218.19.140.242 - - [10/Dec/201 ...

  8. IDEA 学习笔记之 Console显示日志大小

    Console显示日志大小: IntelliJ IDEA默认的Output输出缓存区大小只有1024KB,超过大小限制的就会被清除,而且还会显示[too much output to process] ...

  9. Word文档操作知识

    Word文档操作知识 #持续更新 本次更新时间:2019-03-06 14:34 一.换行时字体空间过大 问题情景:当我们编写中文的文档时,中间插入了西方的字体或符号,在以它为行尾换行时: 会出现字体 ...

  10. 网页布局——table布局

    table 的特性决定了它非常适合用来做布局,并且表格中的内容可以自动居中,这是之前用的特别多的一种布局方式 而且也加入了 display:table;dispaly:table-cell 来支持 t ...