学习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 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
js常用DOM方法详解
Feb 04 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
javascript 鼠标滚轮事件
2009/04/09 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
python学习之hook钩子的原理和使用
2018/10/25 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
python实现图片横向和纵向拼接
2020/03/05 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
python实现无边框进度条的实例代码
2020/12/30 Python
Python截图并保存的具体实例
2021/01/14 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
护士求职自荐信范文
2014/03/19 职场文书
奥利奥广告词
2014/03/20 职场文书
美容院员工规章制度
2015/08/05 职场文书
高中运动会广播稿
2015/08/19 职场文书
python本地文件服务器实例教程
2021/05/02 Python
各国货币符号大全
2022/02/17 杂记
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏
vue递归实现树形组件
2022/07/15 Vue.js
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript