学习vue.js条件渲染
更新时间：2016年12月03日 16:27:13 作者：1owrie
这篇文章主要和大家一起学习vue.js条件渲染，代码注释详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue3.0 CLI - 2.1 - component 组件入门教程
这篇文章主要介绍了vue3.0 CLI - 2.1 - component 组件入门教程,本文主要的关注点就是组件，本文通过实例代码相结合的形式给大家介绍的非常详细，需要的朋友可以参考下2018-09-09
这篇文章主要为大家介绍了vue3 pinia踩坑及解决方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
vue中使用pdfjs-dist + turnjs实现页面的翻书浏览功能
这篇文章主要介绍了vue中使用pdfjs-dist + turnjs实现页面的翻书浏览,通过本文学习我们知道了pdfjs-dist 的工作原理是把获取到的 pbf 的文件的数据流， 利用 canvas转换成图片，本文通过实例代码详解讲解，需要的朋友可以参考下2022-10-10
vue+axios实现文件下载及vue中使用axios的实例
这篇文章主要介绍了vue+axios实现文件下载及vue中使用axios的实例,需要的朋友可以参考下2018-09-09
自带气泡提示的vue校验插件（vue-verify-pop）
这篇文章主要为大家详细介绍了自带气泡提示的vue校验插件，vue-verify-pop的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
本文给大家分享了VUE制作点击按钮出现水波纹效果的组件过程，对此有需求的朋友可以跟着学习下。2018-04-04
这篇文章主要介绍了vue中监听路由参数的变化,给大家介绍了vue中监听路由参数变化的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue中的watch监听数据变化及watch中的immediate、handler和deep属性详解，本文大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-09-09
Vue.js是一种流行的JavaScript框架,用于构建交互式的Web应用程序,这篇文章主要给大家介绍了关于在原生HTML中使用VUE的保姆级教学,需要的朋友可以参考下2023-10-10
在Vue模板中启用这些表现力库插件的最简单方法是在初始化项目时安装它们,或使用 npm install（或 yarn add）安装包,这篇文章主要介绍了Vue3中如何使用SCSS编写样式,需要的朋友可以参考下2023-12-12
最新评论