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"> < ...
随机推荐
- ssh运行环境搭建及测试
一.运行环境 1.Spring环境 Spring是一站式开发框架,在SSH中主要有以下作用,就像一个大管家: 控制反转(Inversion of Control):类不再自己进行类创建,而是交给Spr ...
- 日常踩坑笔记：spring的context:property-placeholder标签
背景: 原来的项目一直跑着没有问题,今天突然想在原有项目的基础上,加上redis进行数据的缓存,原来项目的架构就是传统的SSM框架,于是,大刀阔斧的开始改装了... 编写redis的配置文件——red ...
- gawk编程语言
gawk是一门功能丰富的编程语言,你可以通过它所提供的各种特性来编写好几程序处理数据. 22.1 使用变量 gawk编程语言支持两种不同类型的变量: 内建变量和自定义变量 22.1.1 内建变量 ga ...
- Github发现优秀的开源项目
先上个大logo,哈哈. github上有非常多的资源,我们可以在github上搜索到非常多的开源项目.那么如何使用github查找资源? 罗列出一下几种方式. 1.Explore 登录GitHub, ...
- android studio 在使用图片的时候会检测图片的合法性
1.当android studio 在使用png格式的时候,会报一系列的错误,甚至会显示找不到R文件,这是因为Android studio 不支持png格式的图片,检测图片的合法性的时候会报错 解决方 ...
- TCP连接和 time_wait、close_waite
TCP连接和 time_wait.close_waite tags:time_wait close_waite RST TCP 引言:前两天朋友公司的服务器垮掉了,最后查出的原因是发现大量的time_ ...
- compose合并函数依次执行 - 来源redux
function compose(...funcs) { if (funcs.length === 0) { return arg => arg } if (funcs.length === 1 ...
- SVN使用指引（Windows）
SVN使用指引(本地服务器为Windows) 原:http://wiki.open.qq.com/wiki/SVN%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95%EF%BC% ...
- SSH免密码登录Linux服务器
作者:荒原之梦 原文链接:http://zhaokaifeng.com/?p=587 操作环境: 客户机操作系统:Ubuntu Linux 服务器操作系统:CentOS Linux 免密登陆的原理: ...
- selenium中的xpath定位
一.简介 XPath 是一门在 XML 文档中查找信息的语言.XPath 用于在 XML 文档中通过元素和属性进行导航. 二.定位 2.1 利用自己的本身属性定位 //标签[文本属性和值] 下面百度的 ...