Vue 进阶之路（六）
上篇文章我们分析了一下 vue 中的条件渲染，本篇我们说一下 vue 中的列表渲染和 set 方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<ul>
<template v-for="(val, index) of list" :key="index">
<li>
{{val}}
</li>
</template>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
list: ["aaa", "bbb", "ccc"]
},
})
</script>
</body>
</html>
以上代码我们在 data 里定义了一个 list 数组数据，并在 HTML 代码中通过 v-for 指令循环输出，其中 template 标签我们可以称之为魔法标签，它可以进行 js 语法的书写并且在 HTML 页面里不额外占用标签。并且在循环的时候我们需要向 React 那样为每一个循环对象定义一个 key 值。这样我们就能将数据循环输出到页面，结果如下：
那当我们对 data 里的 list 数据进行修改时会出现怎样的结果呢？如下图：
当我们使用数组的 push 方法时可以对 list 数据进行修改，但是我们直接使用 list[i] = XXX；这样的方法时无法对 list 数据进行修改的，在 vue 中，尤大大为我们内置了七个数组的操作方法，分别是：push，pop，shift，unshift，splice，sort，reverse。其他的数组操作不起作用。那我们要是想要向上面的 app.list[i] 这样的操作该怎么办呢？官方为我们提供了 set ，如下：
通过 set 方法我们就可以改变 list 数组中指定的值了。v-for 不仅可以循环输出数组，还可以循环字符串，对象，当然循环输出字符串可能没什么意思，我们来看一下对象的循环输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(val, key, index) of list" :key="index">
{{key}} - {{val}} - {{index}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
list: {
name: "zhangsan",
age: 30,
sex: "男",
}
},
})
</script>
</body>
</html>
运行结果如下：
当我们像上面的 list 数组那样操作对象时结果是如何呢：
可以看出当我们修改原有的 age 数据时是可以重新渲染 DOM 的，但是当我们在原有的对象上添加新的属性时无法更新 DOM，那我们就可以利用 set 方法来实现，如下：
我们发现使用 set 方法是完全可以的，需要注意的是对象的 key 和 value 都需要添加引号。
其实在 v-for 中的循环 of 在上面的例子中可以被 in 代替，但我们建议使用 for of，这是由于 for in 会循环 js 原型链上的内容，在之前的 ES6 文章中我们说过这个问题，这里就不再着重说明了。
Vue 进阶之路（六）的更多相关文章
- Vue 进阶之路（九）
之前的文章我们介绍了 vue 中父组件之间的传值,本章我们再来看一下父子组件间传值的参数校验和非 Props 特性. <!DOCTYPE html> <html lang=" ...
- Vue 进阶之路（八）
之前的文章我们对组件 component 进行了简单的介绍,本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="e ...
- Vue 进阶之路（七）
之前的文章我们对 vue 的列表输出做了介绍,本章我们来看一下 vue 的组件 component. <!DOCTYPE html> <html lang="en" ...
- Vue 进阶之路（五）
之前的文章我们说了一下 vue 的样式绑定,这篇文章来介绍一下 vue 中的条件渲染,先看下面的代码: <!DOCTYPE html> <html lang="en&quo ...
- Vue 进阶之路（四）
之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的样式绑定. 现在我们想要是想这样一个需求,页面上有个单词,当我们点击它的时候颜色变为红色,再点击一次变为原来的颜色 ...
- Vue 进阶之路（三）
之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的方法 methods,计算属性 computed 和监听器 watch. 现在我们有一个需求,变量 firstNa ...
- Vue 进阶之路（二）
之前的文章我们初识了 vue,对其原理,数据绑定和方法进行了简单的演示,本篇将对 vue 插值表达式,v-text,v-html 进行讲解. <!DOCTYPE html> <htm ...
- Vue 进阶之路（一）
vue 3.x 马上就要问世了,显然尤大大是不想让我们好好活了,但是转念一想,比你优秀的人都还在努力,那我们努力还有什么用,开个玩笑而已,本人对于 vue 的接触时间不长,对其也没有深入地去研究源码, ...
- Vue 进阶之路（十）
之前的文章介绍了 vue 的组件化,本章我们来看一下 vue 中组件的原生事件. <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- nginx基本配置参数说明
#运行用户 user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 #error_log logs/error.log; ...
- 2018山东省ACM省赛G题-Game
Alice and Bob are playing a stone game. There are n piles of stones. In each turn, a player can remo ...
- Django入门四之数据库相关
1. 数据库设置 在settings.py中配置数据库 我首先使用的是sqlite3,所以配置如下 2. 数据库的数据结构定义 #blog/models.py #定义了一个表(Student),表里两 ...
- jq slideToggle()坑
jQuery slideToggle() 方法 jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换. 如果元素向下滑动,则 slid ...
- eclipse springmvc+Thymeleaf
修改pom.xml引入Thymeleaf相关包: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=& ...
- ruby klb.rb irb
1.字符串格式化 Python "%s=%s" % (k, v) 在阅读 Python 字符串格式化的时候,视线先看到字符串的 %s 字样,但是不知道这指的是什么,然后看后面的变量 ...
- 3GPP 测试 /etc/udev/ruse.d/50文件 /lib/udev/ruse.d/55* 网络配置
3GPP是个标准化协议组织,其工作目标是制定协议实现由2G网络到3G网络的平滑过渡,保证未来技术的后向兼容性,支持轻松建网及系统间的漫游和兼容性. 3GPP协议的制订主要是以GSM核心网为基础. 测试 ...
- FutureTask理解
一.概述 FutureTask包装器是一种非常便利的机制,同时实现了Future和Runnable接口. 类图如下: FutureTask是一种可以取消的异步的计算任务.它的计算是通过Callable ...
- spring配置文件中context:property-placeholder导入多个独立的配置文件
spring中 context:property-placeholder 导入多个独立的 .properties配置文件? Spring容器采用反射扫描的发现机制,在探测到Spring容器中有一个 o ...
- 解决MyEclipse注册失败的问题
https://jingyan.baidu.com/article/acf728fd49519ff8e410a361.html