016 V 操控数组

不二如是 · 发表于 2018-9-12 16:30:20

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2018-9-13 10:37 编辑

登录/注册后可看大图

上一讲我们搞定了v-for，本次来学习如何操控数组。

Vue的核心是数据与视图的双向绑定，当我们修改数组时，Vue会检测到数据变化，所以用v-for渲染的视图也会立即更新。

Vue包含了一组观察数组变动的方法，也会触发视图更新。

和JS中语法一样，常用的有：
（0 0 5 4 ★ 数组对象的常用方法大全【索引】）

push（）、pop（）、shift（）、unshift（）、splice（）、sort（）、reverse（）

还在我们上一节的基础上修改：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《Vue-庖丁解牛》案例演示">
<meta name="author" content="鱼C工作室">
<title>鱼C-Vue</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="myApp">
<ul>
<li v-for="book in FishcBooks">{{book.name}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#myApp",
data: {
FishcBooks: [
{
name: "《零基础入门学习Python》"
}, {
name: "《零基础入门学习Scratch》"
}, {
name: "《零基础入门学习Web开发》系列"
}
]
}
})
</script>
</body>
</html>

复制代码

我们在FishcBooks中添加一项，在Vue实例外面可以这么写：

app.FishcBooks.push({
name:'《带你学C带你飞》'
})

复制代码

通过push（）在原数组中添加了一项。

上面列出的方法都会直接修改原始素组。

有些方法不会修改原始数组，会返回一个新数组：

filter（）、concat（）、slice（）

我们filter（）过滤方法来举例：

// 过滤
app.FishcBooks = app.FishcBooks.filter(function (t) {
return t.name.match(/Scratch/);
});
console.log(newFishC);

复制代码

将过滤后的值重新赋给FishcBooks，只显示含有Scratch的选项。

Vue在检测到数组变化时，并不是直接重新渲染整个列表，而是尽可能复用DOM元素。

替换的数组中，含有相同元素的项不会被重新渲染，因此可以用新数组替换老数组。

若想直接在外部直接修改数组长度：

app.FishcBooks.length = 1

复制代码

Vue是不能检测到，也不会触发视图更新。

可以通过silice（）实现：

app.FishcBooks.slice(1)

复制代码

课后作业

1、Vue的核心是：
a.数据与视图的二次渲染
b.DOM结构的自动化创建
c.视图与数据的双向绑定

2、pop（）方法不会直接修改原始数组。（T/F）

3、concat（）方法会修改原始数组。（T/F）

4、直接在外部直接修改数组长度，可以生效。（T/F）

app.FishcBooks.length = 1

复制代码

答案：

游客，如果您要查看本帖隐藏内容请回复

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅专辑（传送门）（不喜欢更要订阅

）

登录/注册后可看大图

lbjstudypython · 发表于 2018-11-27 16:34:59

1.c
2.F
3.T
4.F

Ruide · 发表于 2020-4-9 10:43:01

1.c
2.F
3.F
4.F

优时风 · 发表于 2020-5-6 17:16:41

一笙彤 · 发表于 2020-6-20 14:11:07

suweixuan1998 · 发表于 2020-6-23 21:20:42

c
F
F
F

jack6666 · 发表于 2022-11-1 20:32:10

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 016 V 操控数组

马上注册，结交更多好友，享用更多功能^_^

本帖被以下淘专辑推荐:

浏览过的版块