Vue学习笔记(三)条件渲染和循环渲染
一、条件渲染
条件判断渲染相关的指令:
v-if
v-else
v-elif
v-show
1. v-if
v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true
值的时候被渲染。
例如:
<h2 v-if="isShow">
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
Hello world!
</h2>
当 isShow
为 true
时:
而为 false
时:
2. 与v-else
配合使用
<div id="app">
<h2 v-if="isShow">
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
Hello world!
</h2>
<h2 v-else>
如果isShow==false,显示我
</h2>
</div>
当isShow
为false
时:
3. 与v-else-if
配合使用
<div id="app">
<!-- 但一般不这样使用,一般条件很多的时候在计算属性中解决 -->
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
分数:<input type="text" v-model="score">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
score: 99
}
});
</script>
运行结果:
4. v-show
的使用
用法和 v-if
基本一致:
<!-- v-if: 当条件为false时,包含v-if指令的元素根本不存在(一次)-->
<h2 v-if="isShow" id="aaa">{{message}}</h2>
<!-- 而v-show只是添加了行内样式而已(频繁变化时)-->
<h2 v-show="isShow" id="bbb">{{message}}</h2>
官网给出来的两者的区别:
5. 类型切换案例
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" placeholder="用户账号" id="username" key="username">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" placeholder="用户邮箱" id="email" key="email">
</span>
<button @click="change_login_type">切换类型</button>
var app = new Vue({
el: '#app',
data: {
isUser: true
},
methods: {
change_login_type() {
this.isUser = !this.isUser;
}
}
});
二、列表渲染
我们可以用 v-for
指令基于一个数组来渲染一个列表。v-for
指令需要使用 item in items
形式的特殊语法,其中 items 是源数据数组,而 item
则是被迭代的数组元素的别名。
1. 遍历数组
准备数据:
var app = new Vue({
el: '#app',
data: {
names: ['mike', 'jack', 'sara']
},
methods: {}
});
遍历渲染:
<!-- 没有使用下标值 -->
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
当需要使用下标值时使用:(item, index) in items
形式的语法:
<!-- 获取索引值 -->
<ul>
<li v-for="(item, index) in names">
{{index+1}} -- {{item}}
</li>
</ul>
运行结果:
此外也可以使用 item of items
的语法。
2. 遍历对象
语法:
遍历对象的所有值:v-for="value in myObject"
此外也可以通过:v-for="(value, name) in myObject"
来获取键信息
示例:
准备数据
var app = new Vue({
el: '#app',
data: {
info: {
name: "why",
age: 18,
height: 1.88
}
},
methods: {}
});
获取value
<ul>
<!-- 1.value -->
<li v-for="item in info">
{{item}}
</li>
</ul>
同时获取key
<!-- 2.获取key-value -->
<ul>
<li v-for="(key, value) in info">
{{key}} -- {{value}}
</li>
</ul>
同时获取index
<ul>
<li v-for="(key, value, index) in info">
{{index+1}}--{{key}}--{{value}}
</li>
</ul>
运行结果:
3. 循环渲染中key的使用
以下解释摘自官网:https://v3.cn.vuejs.org/api/special-attributes.html#key
key
特殊 attribute 主要用做 Vue 的虚拟 DOM 算法的提示,以在比对新旧节点组时辨识 VNodes。如果不使用 key,Vue 会使用一种算法来最小化元素的移动并且尽可能尝试就地修改/复用相同类型元素。而使用 key 时,它会基于 key 的顺序变化重新排列元素,并且 key 不再存在的元素将始终被移除/销毁。有相同父元素的子元素必须有唯一的 key。重复的 key 会造成渲染错误。
简单来说使用key
可以提高程序的效率,但需要保证相同父元素的子元素必须有唯一的 key。
但是对于一般的数组来说是不能使用index
作为 v-for
指令的 key
的,详细解析见:Vue2.0 v-for 中 :key 到底有什么用? - 方应杭的回答 - 知乎 https://www.zhihu.com/question/61064119/answer/766607894
那如果不使用 index
,那使用什么东西作为 key
呢?这里知乎大神给出了答案:
没有 id 怎么办?
- 创建一个 id() 函数,每次调用自增一
- 使用 guid 库或者 uuid() 库
- 最好使用数据库中的 id
具体示例如下:
var app = new Vue({
el: '#app',
data: {
letters: ['a', 'b', 'c', 'd', 'e'],
curId: 0
},
methods: {
getId() {
res = this.curId;
this.curId++;
return res;
}
}
});
<div id="app">
<ul>
<li v-for="item in letters" :key="getId()">{{item}} </li>
</ul>
</div>
运行结果:
4. 哪些数组方法是响应式的
是响应式的方法:
push(Object obj)
pop()
shift()
删除第一个unshift()
在数组前面添加元素,可以多个splice()
移除指定下标范围的元素sort()
排序元素reverse()
反转元素- 使用
Vue.set(this.xxx, 0, "aaa")
来代替this.xxx[0]="aaa";
修改元素的值。
5. CoderWhy老师留下作业的完成
要求:展示出列表 ['海王', '海尔兄弟', '火影忍者', '进击的巨人']
中的数据,当鼠标点击某个文本时,该文本变成红色
,而其他文本为原来的黑色
。(即选中高亮
)
css部分:
.active {
color: red;
}
js部分:
var app = new Vue({
el: '#app',
data: {
movies: ['海王', '海尔兄弟', '火影忍者', '进击的巨人'],
currentIndex: -1
},
methods: {
onClick(li_index) {
this.currentIndex = li_index;
}
}
});
html部分:
<ul>
<!-- <li v-for="movie in movies">{{movie}}</li> -->
<li v-for="(movie, index) in movies" :class="{active:index===currentIndex}" @click="onClick(index)">
{{movie}}
</li>
</ul>
实现效果:
点击第一个:
点击第三个:
Vue学习笔记(三)条件渲染和循环渲染的更多相关文章
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
- vue学习笔记(五)条件渲染和列表渲染
前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...
- Vue学习笔记三:v-bind,v-on的使用
目录 v-bind:绑定属性值,内容相当于js,缩写: v-on:绑定方法,缩写@ 总结 v-bind:绑定属性值,内容相当于js,缩写: 我添加了一个input标签,如下 <input typ ...
- VUE 学习笔记 三 模板语法
1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...
- python3学习笔记.3.条件控制与循环
1.条件控制 关键字 if.elif.else 一般形式如下: if 条件1: 结果1 elif 条件2: 结果2 else: 结果3 注意:条件后的:语句的缩进的是相同的 2.循环语句 关键字有 ...
- 【Linux_Shell 脚本编程学习笔记三、分支与循环结构】
if 语句是实际生产工作中最重要且最常用的语句,所以,必须掌握牢固 if 条件语法 1. 单分支机构 if [ 条件 ] then 指令 fi 或 if [ 条件 ]; then 指令 fi ...
- vue学习笔记(三):vue-cli脚手架搭建
一:安装vue-cli脚手架: 1:为了确保你的node版本在4.*以上,输入 node -v 查看本机node版本,低于4请更新. 2:输入: npm install -g vue-cli ...
- vue学习笔记三:常见的表单绑定
<template> <div id="app"> <input type="checkbox" id="checked ...
- vue学习笔记(四)事件处理器
前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
随机推荐
- excel VBA把一个单元格内容按逗号拆分并依次替换到另一个单元格的括号里面(本题例子,把文本中的括号换成{答案}的格式,并按顺序填空)
方法1:运用excel单元格拆分合并实现 思路:用VBA正则查询左侧括号个数,对右侧单元格逐一按逗号.顿号等符号分列,同时左侧按括号分列(分列只能按括号单边分列),分列完成后按要求合并,本题事例把括号 ...
- 【春节歌曲回味 | STM32小音乐盒 】PWM+定时器驱动无源蜂鸣器(STM32 HAL库)
l STM32通过PWM与定时器方式控制无源蜂鸣器鸣响 l STM32小音乐盒,歌曲进度条图形显示与百分比显示,歌曲切换 l 编程使用STM32 HAL库 l IIC OLED界面编程,动画实 ...
- 教你几招HASH表查找的方法
摘要:根据设定的哈希函数 H(key) 和所选中的处理冲突的方法,将一组关键字映象到一个有限的.地址连续的地址集 (区间) 上,并以关键字在地址集中的"象"作为相应记录在表中的存储 ...
- redis-list实现
Redis 数据结构---链表 Redis的list底层实现使用的不是数组而是链表的数据结构 叫listnode 是一个双向链表 ListNode{ Struct listNode *prev / ...
- webpack(8)vue组件化开发的演变过程
前言 真实项目开发过程中,我们都是使用组件化的去开发vue的项目,但是组件化的思想又是如何来的呢?下面就从开始讲解演变过程 演变过程1.0 一般情况下vue都是单页面开发,所以项目中只会有一个inde ...
- linux sort uniq命令详解
sort 功能说明:将文本文件内容加以排序,sort可针对文本文件的内容,以行为单位来排序. sort [-bcdfimMnr][-o<输出文件>][-t<分隔字符>][+&l ...
- PHP经典算法之背包问题
问题:假设有一个背包的负重最多可达8公斤,而希望在背包中装入负重范围内可得之总价物品,假设是水果好了,水果的编号.单价与重量如下所示: 1 栗子 4KG $4500 2 苹果 5KG $5700 3 ...
- leetcode 861 翻转矩阵后的得分
1. 题目描述 2.思路分析: 1. 首先这里的翻转分为了行翻转和列翻转,我们这里只需要求如何翻转后得到最大值,有点贪心的思想,因为最大值一定是固定的 至于是什么路径到达的最大值不是我们所关心的,我们 ...
- Spring Ioc和依赖注入
总结一下近来几天的学习,做个笔记 以下是Spring IoC相关内容: IoC(Inversion of Control):控制反转: 其主要功能可简单概述为:将 用 new 去创建实例对象,转换为让 ...
- ctf之SusCTF2017-Crack Zip
题目信息如下,可知为杂项题,且无提示 下载文件打开如图,该压缩包是加密的 首先想到的是暴力破解,下载zip暴力破解软件打开文件. 下一步,选择暴力破解 进行暴力破解设定,进行破解 破解完成,得到密解压 ...