学习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 汉字字节判断
Aug 01 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
2019十大人气国漫
2020/03/13 国漫
详解PHP中的null合并运算符
2015/12/30 PHP
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
React diff算法的实现示例
2018/04/20 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
python分割和拼接字符串
2013/11/01 Python
python3图片转换二进制存入mysql
2013/12/06 Python
使用PDB模式调试Python程序介绍
2015/04/05 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
编辑个人求职信范文
2013/09/21 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL