简单理解Vue条件渲染


Posted in Javascript onDecember 03, 2016

一、v-if显示单个元素

注意else只能跟在v-if或者v-show后面

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue条件渲染</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <div class="test">
 <div v-if="isDisplay"> <!--if...else... 单个元素-->
 显示我1
 </div>
 <div v-else>
 显示我2
 </div>
 </div>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

输出结果是:显示我1

二、v-if显示多个元素,需配合<template>

注意else只能跟在v-if或者v-show后面

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue条件渲染</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <div class="test">
 <template v-if="isDisplay"> <!--if...else... 用template实现多个元素-->
 <div>显示我1</div>
 <div>显示我11</div>
 <div>显示我12</div>
 <div>显示我13</div>
 </template>
 <div v-else>
 显示我2
 </div>
 </div>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

输出结果: 显示我1 显示我11 显示我12 显示我13

三、v-show只支持单元素显示,不支持<template>包含的多元素

注意else只能跟在v-if或者v-show后面

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue条件渲染</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <div class="test">
 <div v-show="isDisplay"> <!--if...else... 单个元素,注意注意 v-show 不支持 <template> 语法-->
 显示我1
 </div>
 <div v-else>
 显示我2
 </div>
 </div>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

四、v-if与v-show的区别

(1)v-if是真实的渲染与卸载,只不过第一次渲染后,会将结果缓存一下

(2)v-show元素始终被编译并保留,只是简单地基于 CSS 切换

(3)总结: 如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好

gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08

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

Javascript 相关文章推荐
一些常用的JS功能函数代码
Jun 23 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
简单了解JavaScript异步
May 23 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
学习vue.js条件渲染
Dec 03 #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
You might like
wordpress之wp-settings.php
2007/08/17 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
JsRender实用入门教程
2014/10/31 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
python基础教程之Filter使用方法
2017/01/17 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
实例详解Python模块decimal
2019/06/26 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
红领巾广播站广播稿
2014/02/01 职场文书
家长学校培训材料
2014/08/20 职场文书
写给老师的感谢信
2015/01/20 职场文书
会计工作能力自我评价
2015/03/05 职场文书
电信营业员岗位职责
2015/04/14 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
实习报告怎么写
2019/06/20 职场文书
golang slice元素去重操作
2021/04/30 Golang