马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
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（）实现：
课后作业
1、Vue的核心是：
a.数据与视图的二次渲染
b.DOM结构的自动化创建
c.视图与数据的双向绑定
2、pop（）方法不会直接修改原始数组。（T/F）
3、concat（）方法会修改原始数组。（T/F）
4、直接在外部直接修改数组长度，可以生效。（T/F）app.FishcBooks.length = 1
答案：
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢Vue，请订阅 专辑（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-9-12 16:30:20
置顶卡
千斤顶
显身卡
发表于 2018-11-27 16:34:59
发表于 2020-4-9 10:43:01