Vue入门教程 第三篇 (条件与循环)

v-if语法(条件)

符合条件时显示(渲染)某一元素。

 1 <div id="app">
 2     <div v-if="ok">
 3       <h1>title</h1>
 4     </div>
 5
 6      <div v-if="type==1">
 7       <h1>title2</h1>
 8     </div>
 9      <div v-else-if="type==2">
10       <h1>title3</h1>
11     </div>
12      <div v-else>
13       <h1>title4</h1>
14     </div>
15
16     <div v-if="2>1">
17       <h1>title5</h1>
18     </div>
19 </div>
20
21 <script>
22 new Vue({
23   el: ‘#app‘,
24   data: {
25     type: ‘1‘,
26     ok: true
27   }
28 })
29 </script>

执行结果:

v-if可以使用data对象,也可以直接使用表达式(如:2>1)。

v-show也可以达到根据条件显示元素的目的,但是两者有一些区别。

v-if与v-show区别:

相同点:v-if与v-show都可以动态控制dom元素显示隐藏

不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css--display:none,dom元素还在。

需要注意的是,当一个元素默认在css中加了display:none属性,这时通过if-show修改为true是无法让元素显示的。原因是显示隐藏切换,只是会修改element styledisplay:""或者display:none,并不会覆盖掉或修改已存在的css属性。

更详细的区别这里直接引用Young Dreamer的博客内容:

1.手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;

2.编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;

3.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;

4.性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;

5.使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换。

v-for语法(循环)

v-for 指令需要以 data in datas 形式的特殊语法实现, datas 是源数据数组并且 data 是数组元素迭代的别名。

范例:

 1 <div id="app">
 2   <ol>
 3     <li v-for="data in datas">
 4       {{ data.name }}
 5     </li>
 6   </ol>
 7 </div>
 8 <script>
 9 new Vue({
10   el: ‘#app‘,
11   data: {
12     datas: [
13       { name: ‘test‘ },
14       { name: ‘test2‘ },
15       { name: ‘test3‘ }
16     ]
17   }
18 })
19 </script>

执行结果:

使用v-for迭代显示一个完整的对象(包括index、key和value):

 1 <div id="app">
 2   <ul>
 3     <li v-for="(value, key, index) in object">
 4      {{ index }}. {{ key }} : {{ value }}
 5     </li>
 6   </ul>
 7 </div>
 8 <script>
 9 new Vue({
10   el: ‘#app‘,
11   data: {
12     object: {
13       name: ‘Jimmy‘,
14       sex: ‘male‘,
15       age: 16
16     }
17   }
18 })
19 </script>

执行结果:

其中,index是索引,key是键值,value是值内容。

原文地址:https://www.cnblogs.com/JHelius/p/11684203.html

时间: 2024-11-07 04:55:48

Vue入门教程 第三篇 (条件与循环)的相关文章

Vue入门教程 第七篇 (vue脚手架与发布)

vue-cli(vue脚手架) vue-cli,我们也称vue脚手架,是一个全自动生成vue项目的程序,使用它我们可以快速搭建一个基础的vue项目.vue-cli只是为了方便我们开发的工具,并非必须. npm安装脚手架程序: npm install -g vue-cli  开始初始化项目(项目名称:project-name): vue init webpack-simple project-name 生成项目目录: 1 README.md --项目说明包 2 package.json -- 存放

【转帖】Systemd 入门教程:命令篇

Systemd 入门教程:命令篇 Copy From http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.html 感觉是一个非常好的入门教程 Systemd 是 Linux 系统工具,用来启动守护进程,已成为大多数发行版的标准配置. 本文介绍它的基本用法,分为上下两篇.今天介绍它的主要命令,下一篇介绍如何用于实战. 一.由来 历史上,Linux 的启动一直采用init进程. 下面的命令用来启动服务. $ sudo /

Systemd 入门教程:实战篇

Systemd 入门教程:实战篇 上一篇文章,介绍了 Systemd 的主要命令,这篇文章主要介绍如何使用 Systemd 来管理我们的服务,以及各项的含义: 一.开机启动 对于那些支持 Systemd 的软件,安装的时候,会自动在/usr/lib/systemd/system目录添加一个配置文件,如果你想让该软件开机启动,就执行下面的命令(以httpd.service为例). $ sudo systemctl enable httpd 上面的命令相当于在/etc/systemd/system目

DataVeryLite入门教程(二) Entity篇

DataVeryLite 是基于.net 4.0的数据库持久化ORM框架. 目前支持的数据库有Sqlserver,Mysql,Oracle,Db2,PostgreSql,Sqlite和Access. 最好先阅读DataVeryLite入门教程(一) 配置篇,然后再阅读本篇.如果你觉得麻烦也可以跳过. Entity是ORM中的核心对象之一,一个继承Entity的对象对应于数据库中的一个表. Entity提供丰富的API对表中的单条数据进行操作. 比如根据id或其他条件,加载,删除,插入,更新和部分

DataVeryLite入门教程(一) 配置篇

DataVeryLite 是基于.net 4.0的数据库持久化ORM框架. 目前支持的数据库有Sqlserver,Mysql,Oracle,Db2,PostgreSql,Sqlite和Access. DataVeryLite 的配置系统非常简单,稍微有点c#基础的程序猿,半小时都能上手; 不仅学习简单,编码量也非常少;熟练之后基本可以复制粘贴来完成配置. 1.连接字符串配置 a,App.config/Web.config配置方式 在<connectionStrings>节点中添加配置,示列如下

WebGL入门教程第1篇——六色立方

WebGL入门教程第1篇——六色立方 WebGL,一项允许开发人员在浏览器里操纵GPU来显示图形的技术.让我们一起走进WebGL的世界. 读者对象 本系列适合具有基础JavaScript知识的开发人员. 准备工作 我们应该在本地搭建好web服务器,或者安装了具有预览功能的IDE.如果你安装了Visual Studio,Nivk童鞋为我们开发了WebGL代码提示功能,你可以通过以下步骤使Visual Studio支持WebGL代码提示:打开Visual Studio——点击工具——点击选项——展开

【知识整理】这可能是最好的RxJava 2.x 入门教程(三)

目录 一.前言 二.正题 7.distinct 8.Filter 9.buffer 10.timer 11.interval 12.doOnNext 13.skip 14.take 15.just 三.写在最后 正文 这可能是最好的RxJava 2.x入门教程系列专栏 文章链接: 这可能是最好的RxJava 2.x 入门教程(一) 这可能是最好的RxJava 2.x 入门教程(二) 这可能是最好的RxJava 2.x 入门教程(三) GitHub 代码同步更新:https://github.co

WCF入门教程(三)属性标签

属性标签,成为定义协议的主要方式.先将最简单的标签进行简单介绍,以了解他们的功能以及使用规则. 服务协定标识,标识哪些接口是服务协定,哪些操作时服务协定的一部分,以及传输对象的定义.如果已经有所了解,请直接PASS. 1.ServiceContract(服务协定) 全名:System.ServiceModel.ServiceContractAttribute 功能:指示接口或类在应用程序中定义服务协定. 简单一句话:标识此接口是否是服务协定,是否需要公开为服务. 详细:使用接口(或类)上的 Se

Photoshop入门教程(三):图层

学习心得:图层可以说是Photoshop的核心,看似简单,但是对于图像的各种编辑都是基于图层.他就像一层透明的.没有厚度的玻璃纸,每张玻璃纸设置不同的效果,层层叠加,最后显现出绚烂的效果. 在进行图像处理工作时,最好不要破坏原片,不要直接在原片上进行编辑.因为当工作到后期时,可能发现之前的操作需要修改,但是操作步骤数太多,"历史记录"工具已经派不上用途了.这时,图层就成了拯救世界的英雄,一个简单的方法就是在开始修片工作前将原片复制一层作为备份图层再编辑.善于运用图层这个Photosho