Vue入门第4天----模板语法(循环)

小鱼儿 2023-07-10 15:43 79阅读 0赞

## 一、分支循环结构 ##

**1.1 分支结构**

*  v-if
 *  v-else
 *  v-else-if
 *  v-show

> v-if、 v-else、 v-else-if这三个使用的方法和js里面的if 、else if、else的使用方法其实一样的；v-show其实和v-show差不多。

**1.2 v-if与v-show的区别**

*  v-if控制元素是否渲染到页面
 *  v-show控制元素样式是否显示（已经渲染到页面）

> 如果我们要让一个元素频繁的显示或隐藏，我们推荐用v-show；如果希望元素渲染出之后变化的比较少我们推荐用v-if。v-if其实是控制DOM元素的，消耗性能比较大，我们最好还是使用v-show。

## 二、循环结构 ##

*  v-for遍历数组

<li v-for="item in fruits">{ { item}}</li>

> item是自己起的名字表示一项数据，后面\{ \{\}\}的值要和自己起的名字一样，in是关键字, fruits对应的属性名（你要遍历的数据即fruits数组)。

<li v-for="(item,index) in fruits">{ { item+'---'+index}}</li>

*  key的作用：帮助Vue区分不同的元素，从而提高性能

<li :key="item.id" v-for="(item,index) in fruits">{ { item+'---'+index}}</li>

> 如果没有id，则可以用索引  
> :key=‘index’

*  v-for遍历对象

<div v-for="(value,key,index) in obj">{ { value+'---'+key+'---'+index}}</div>

> value、key、index的名字可以改变，但是它们3个的位置不能改变，这里用插值表达式\{ \{\}\}来显示输出内容。

*  v-if和v-for结合使用

<div v-if="value==13" v-for="(value,key,index) in obj">{ { value+'---'+key+'---'+index}}</div>

> 当value值等于13时才会显示value值，不满足时不显示

*从现在开始vue模板语法完事了！！！*

发表评论取消回复

表情：

评论列表（有 0 条评论，79人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue入门第4天----模板语法(循环)

一、分支循环结构 1.1 分支结构 v-if v-else v-else-if v-show > v-if、 v-else、 v-else-i

小鱼儿/ 2023年07月10日 15:43/ 0 赞/ 80 阅读

相关 Vue入门第3天------模板语法（二）

一、属性绑定 1.1 Vue如何动态处理属性 v-bind指令用法 <a v-bind:href='url'>跳转</a> 缩写形式

男娘i/ 2023年07月10日 12:39/ 0 赞/ 131 阅读

相关 Vue入门第2天-------Vue模板语法(一)

一、Vue模板语法 1.1前端渲染前端渲染把数据填充到HTML标签中前端渲染方式原生js拼接字符串使用前端模板引擎使用Vue特有

小鱼儿/ 2023年07月07日 12:41/ 0 赞/ 54 阅读

相关 Vue入门第五天

1.路由的概念路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资

迷南。/ 2022年09月08日 10:28/ 0 赞/ 321 阅读

相关 Vue入门第四天

接口调用方式原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」

「爱情、让人受尽委屈。」/ 2022年09月08日 10:25/ 0 赞/ 347 阅读

相关 vue入门第三天

组件组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素，封装可重用的代组件注册全局注册

深碍√TFBOYSˉ_/ 2022年09月08日 10:25/ 0 赞/ 284 阅读

相关 CSS基础入门第2天课堂笔记

CSS基础入门第2天课堂笔记（本课程共6天）目录一、晨早测验题目讲解二、css基础选择器 2.1 标签选择器 2.2 id选择器 2.3 类选

柔情只为你懂/ 2022年06月01日 08:43/ 0 赞/ 374 阅读

相关 HTML基础入门第2天课堂笔记

HTML第2天基础入门第2天课堂笔记（本课程共2天）目录一、复习上节课的内容二、HTML骨架 2.1 文档声明头 2.2 字符集 2.3 关键

ゞ浴缸里的玫瑰/ 2022年06月01日 08:39/ 0 赞/ 439 阅读

相关 HTML基础入门第1天课堂笔记

HTML基础入门第1天课堂笔记（本课程共2天）目录一、基础班的介绍 1.1 脚踏实地行，海阔天空飞 1.2 对大家的要求二、计算机基础知识 2

忘是亡心i/ 2022年06月01日 08:37/ 0 赞/ 478 阅读

相关 Java入门第25课——循环结构

1.1 什么是循环结构 1.1.1 什么是循环结构 · 循环是程序设计语言中反复执行某些代码的一种计算机处理过程，是一组相同或相似语句被有规律的重复性执行。 ·

冷不防/ 2022年01月30日 05:13/ 0 赞/ 440 阅读