vue条件渲染2
<!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的更多相关文章
- Vue条件渲染
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素 注意else只能跟在v-if或者v-s ...
- Vue#条件渲染
根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定 ...
- [vue]vue条件渲染v-if(template)和自定义指令directives
条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <di ...
- vue 条件渲染与列表渲染
本文是对官方文档的整理 因为 v-if 是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v ...
- (尚008)Vue条件渲染
1.test008.html <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...
- vue 条件渲染 v-if v-show
1.要点 1.1 v-if 条件性地渲染一块内容 <h1 v-if="awesome">Vue is awesome!</h1> 附带 / v- ...
- vue 条件渲染v-if v-show
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue 条件渲染方式
1.通过class绑定 <div :class="{'div-class': this.align == 'center'}"></div> 对应的css ...
- vue.js选择if（条件渲染）详解
vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...
随机推荐
- 读《深入理解Elasticsearch》点滴-查询分类
1.如何分类,略.个人不接受书中的分类方法,建议采用官网上的分类方法 2.term查询,可以模拟No-SQL数据库
- mysql replace into使用
使用mysql插入数据时,我们通常使用的是insert into来处理,replace into有时可以替代insert into功能,但replace into也有自己的用法 准备一张测试表: CR ...
- Spring Cloud 初认识
Spring Cloud是一个继承了众多开源的框架,其利用了Springboot开发的便利性来实现分布式服务功能,是一套开放.易部署.易维护的分布式开发工具包,而且有成熟的社区且社区活跃度很高.Spr ...
- Java 从入门到进阶之路（八）
在之前的文章我们介绍了一下 Java 中的重载,接下来我们看一下 Java 中的构造方法. 我们之前说过,我们在定义一个变量的时候,java 会为我们提供一个默认的值,字符串为 null,数字为 0. ...
- 自己写的Weblogic的poc
""" 暂时只试用于Linux,先试试用一下反弹shell CVE-2017-10271的EXp """ import requests i ...
- Xadmin查询
目录 深浅coopy运用 ModelForm的补充 提取模型当中相关属性 getattr和get_field的区别 __ str__,get_field,getattr初识 str ,当用getatt ...
- 如何去除CFormView的Scrollbar
第一种方法: 重载 OnSize(UINT nType, int cx, int cy) 在CFormView::OnSize(nType, cx, cy)下面添加一句 ShowScrollBar(S ...
- JAVA阻塞（IO）和非阻塞(NIO)
查看这篇文章,了解更多关于Java的阻塞和非阻塞替代创建套接字的信息. 套接字使用TCP / IP传输协议,是两台主机之间的最后一块网络通信. 您通常不必处理它们,因为它们之上构建了协议,如HTTP或 ...
- vue图片点击放大预览
第一种:viewerjs使用介绍(PC.移动端都兼容) 1.先安装依赖 npm install v-viewer --save 2.main.js内引用并注册调用 //main.js import V ...
- 基于 WebGL 的 3D 动态柱状图表
发现现在工业SCADA上或者电信网管方面用图表的特别多,虽然绝大部分人在图表制作方面用的是echarts,他确实好用,但是有些时候我们不能调用别的插件,这个时候就得自己写这些美丽的图表了,然而图表轻易 ...