<!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. 23种设计模式之代理模式(Proxy Pattern)

    在软件开发过程中,有些对象有时候会由于网络或其他的障碍,以至于不能够或者不能直接访问到这些对象,如果直接访问对象给系统带来不必要的复杂性,这时候可以在客户端和目标对象之间增加一层中间层,让代理对象代替 ...

  2. Spring boot 官网学习笔记 - logging

    commons-logging和slf4j是java中的日志门面,即它们提供了一套通用的接口,具体的实现可以由开发者自由选择.log4j和logback则是具体的日志实现方案. 比较常用的搭配是com ...

  3. Spring MVC-从零开始-view-直接返回页面不传data

    1.applicationContext配置 <?xml version="1.0" encoding="UTF-8"?> <beans xm ...

  4. 事件--JavaScript

    事件概述 JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为. 简单理解: 触发--- 响应机制. 网页中的每个元素都可以产生某些可以触发 JavaSc ...

  5. ng 目录详解

    在新建的项目中需要我们关注的就是package.json和src文件夹 node_modules (项目所需依赖)是package.json所创建的模块安装到node_modules中 src:是代码 ...

  6. Zookeeper监控(Zabbix)

      一直在弄监控,这些个中间件Zookeeper.Kafka......,平时也只知道一点皮毛,也就搭建部署过,没有真正的用过,一般都是大数据的同学在用,作为运维人员我需要对他做一个监控,由于对他不是 ...

  7. linux下安装配置go语言环境

    1,golang中国下载go源码  http://www.golangtc.com/download  请对应系统版本号,linux-amd64.tar.gz为64位系统(推荐) ,linux-386 ...

  8. 那些初学python犯过的小白错误(学习笔记1)

    一.关于print函数 区别于c和py2,py3的print的正确形式如下:print("hello world") 错误语句:print"hello world&quo ...

  9. C#中的等值判断1

    目录 简介 值类型和引用类型的相等比较 和相等比较相关的函数 string 和 System.Uri 的等值比较 泛型接口 IEquatable<T> 自定义比较方法 举例 总结 简介 最 ...

  10. python编程基础之二十一

    元组: t1 = () t2 = tuple() 成员访问: t1 =(10,7,12,23) print(t1[0])  #下表访问 连接操作 t1 = (1,2,3) t2 =(4,5,6) t3 ...