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"> < ...
随机推荐
- 开始记录学习java的笔记
今天开始记录学习java的笔记,加油
- Kudu vs HBase
本文由 网易云发布. 背景 Cloudera在2016年发布了新型的分布式存储系统--kudu,kudu目前也是apache下面的开源项目.Hadoop生态圈中的技术繁多,HDFS作为底层数据存储的 ...
- php定时执行操作及ob_flush()与flush()的使用
版权声明:本文为博主原创文章,未经博主允许不得转载. http://blog.csdn.net/qq_38125058 一: 每隔30s执行一次,将字符串写入文件 // 30秒执行一次 ignore_ ...
- JavaScript和JQuery的区别
一.本质上的区别 1.JavaScript 是通过<script></script>标签插入到HTML页面,可由所有的现代浏览器执行的一种轻量级的编程语言. 2.JQuery是 ...
- Java操作Memcached
本文复制其他播客,有好的技术文章希望各位大神能告知... 谢谢. 如何使用Java操作Memcached实例: 代码一: package com.ghj.packageoftool; import j ...
- Oracle-13：Oracle中的表分区
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客记录了表分区 表分区的含义: 典型的拿空间换时间的案例! 表分区对一张表进行分区,分区之后表中的数据存 ...
- Linux时间子系统之（十四）：tick broadcast framework
专题文档汇总目录 Notes:BroadcastTick作为cpuidle的waker,硬件基础.BroadcastTick嵌入在当前系统Tick框架中.BroadcastTick设备初始化:周期性T ...
- Git Push:error: Couldn't set refs/remotes/origin/master;error: update_ref failed for ref 'refs/remot
作者:荒原之梦 原文链接:http://zhaokaifeng.com/?p=543 今天使用Git Push代码时产生错误: Rename from 'XXXX/.git/refs/remotes/ ...
- Whitelabel Error Page 专题
Spring boot为错误视图提供了如下错误属性:timestamp:错误发生的时间status:HTTP状态码error:错误原因exception:异常的类名message:异常消息(如果这个错 ...
- Mongo 专题
什么是MongoDB ? MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在为WEB应用提供 ...