学习vue.js条件渲染


Posted in Javascript onDecember 03, 2016

本文实例为大家分享了vue.js中条件渲染的练习代码,供大家参考,具体内容如下

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
</head>
<body>
<!-- v-if 作为判断条件 如果满足则展示它所附着的元素的内容-->
<!-- 除了v-if 还可以配合使用v-else--> 
<div id="app-1" v-if="Math.random()>0.5">
{{message}}
</div>
<div id="app-2" v-else>
{{message2}}
</div>

<!-- v-if使用时必须加在一个元素上 如果想要根据一个判定条件展示多个数据的话 要用到template-->
<!-- template相当于一个包装元素 不显示在网页上 -->
<template v-if="ok">
<h1>这是个标题</h1>
<p>lowrie</p>
</template>
<!-- v-else还可以跟在v-show后-->
<!-- 注意:v-else必须紧跟在v-show 或者v-if后 否则浏览器不能识别 -->
<!-- v-show和v-if的区别 v-show所附着的元素会一直存在于Dom层中 是简单的切换元素的CSS属性display -->
<!-- 注意:v-show不支持template -->
<div v-show="ok">
我是v-show
</div>
<!-- v-if v-show对比:
v-if是真实的条件渲染,因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下, v-show 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
一般来说, v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换使用 v-show 较好,如果在运行时条件不大可能改变则使用 v-if 较好。 -->

<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>
 

js:

var app1=new Vue({
el:'#app-1',
data:{
message:'我的随机数大于0.5'
}
});
var app2=new Vue({
el:'#app-2',
data:{
message2:'我的随机数小于0.5'
}
});

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 #Javascript
jquery 判断div show的状态实例
Dec 03 #Javascript
利用浮层使select不可选的实现方法
Dec 03 #Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 #Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 #Javascript
jquery 多个radio的click事件实例
Dec 03 #Javascript
jquery点击展示与隐藏更多内容
Dec 03 #Javascript
You might like
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Python分支结构(switch)操作简介
2018/01/17 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
简约控的天堂:The Undone
2016/12/21 全球购物
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
国家助学金获奖感言
2014/01/31 职场文书
工作表现自我评价
2014/02/08 职场文书
电焊工岗位职责
2014/03/06 职场文书
任命书格式
2014/06/05 职场文书
岗位职责说明书模板
2014/07/30 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
教师自我剖析材料
2014/09/29 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
投资意向协议书
2015/01/29 职场文书
基石观后感
2015/06/12 职场文书
Python基础之进程详解
2021/05/21 Python