学习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 相关文章推荐
js 数组操作代码集锦
Apr 28 Javascript
动态刷新 dorado树的js代码
Jun 12 Javascript
Javascript 面向对象 继承
May 13 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
原生js实现滑块区间组件
Jan 20 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
图书管理程序(二)
2006/10/09 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
python实现图像外边界跟踪操作
2020/07/13 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
初一体育教学反思
2014/01/29 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
一年级学生评语大全
2014/04/21 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS