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"> < ...
随机推荐
- Niop2017初赛滚粗记
初赛踢蹬滚粗 TOT (╯°Д°)╯︵┻━┻ ヽ(｀Д´)ﾉ︵ ┻━┻ ┻━┻ 排序啊排序,净是排序,自打我学了C++就再没学过排序!!wtf! (╯°Д°)╯︵ /(.□ . )我tm怎么知道建国那 ...
- linux环境安装svn并进行多个源码库区分管理
关于svn的文档有很多大部分已Windows为例子,因公司没有Windows服务器经过一天的曲折终于初步安装了解了svn.下面一些经验希望能帮助新手 本文采用的yum安装(简单快速没必要源码) 1.y ...
- Oracle12c中数据泵新特性之功能增强(expdp, impdp)
Oracle的数据泵功能在10g中被引进.本文对数据泵在12c中的增强做一个概览. 1. 禁用日志选项(DISABLE_ARCHIVE_LOGGING) Impdp的TRANSFORM参数已经扩展 ...
- Python杂记
一.函数 1.numpy 模块中的nonzero函数 nonzero返回的数非零元素的下标. 如果输入是单维度的时候它的返回值只有一个:如果输入是多个维度的话,那么它的返回值也是多个维度的.并且的它的 ...
- eclipse 安装svn和gradle
公司项目用的eclispe svn和gradle 所以需要配置 SVN教程:https://blog.csdn.net/jieshaowang1229/article/details/5159499 ...
- 团队项目第二阶段个人进展——Day6
一.昨天工作总结 冲刺第六天,学习了leancloud的一些数据处理知识,并看了如何在微信小程序中使用 二.遇到的问题 无 三.今日工作规划 通过动手完成一个demo来学习后端数据的请求和响应
- 用Java制作一个简单的图片验证码
//Java实现简单验证码功能 package project; import java.awt.Color; import java.awt.Font;import java.awt.Graphic ...
- .net Core 微服务框架 surging 使用
surging 是一个分布式微服务框架,提供高性能RPC远程服务调用,采用Zookeeper.Consul作为surging服务的注册中心, 集成了哈希,随机,轮询作为负载均衡的算法,RPC集成采用的 ...
- 学unity3d需要什么基础
学unity3d需要什么基础?在游戏业发展如火如荼的情境下,很多人开始转行投身于游戏程序开发,而unity3D游戏开发则是他们必须了解和会用的游戏开发工具.在学习之前又应该了解哪些内容呢? unity ...
- redux 中间件 --- applyMiddleware 源码解析 + 中间件的实战
前传 中间件的由来 redux的操作的过程,用户操作的时候,我们通过dispatch分发一个action,纯函数reducer检测到该操作,并根据action的type属性,进行相应的运算,返回st ...