016 V 操控数组
本帖最后由 不二如是 于 2018-9-13 10:37 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们搞定了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
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 1.c
2.F
3.T
4.F 1.c
2.F
3.F
4.F 1 0 c
F
F
F 1
页:
[1]