前端学习——VUE列表渲染
文章目录
- 一 v-for
-
- 1.1 数组
- 1.2 对象
- 1.3 维护状态
- 二 数组更新检测
-
- 2.1 变异方法
- 2.2 替换数组
- 2.3 无法识别
- 三 对象变更
- 四 显示过滤/排序后的结果
- 在v-for中使用数值
-
- 五 v-for与v-if一起使用
- #疑问
-
- 对象和属性
一 v-for
1.1 数组
第一个元素为数组成员，第二个元素为数组下标
<li v-for="a1,a2 in items" :key="index">
{{a2}}.{{ a1 }}
li>
el : "#app",
data : {
items : [
"内容一",
"内容二"
]
}
1.2 对象
声明的第一个为对象值，第二个为对象key，第三个对象为索引
<li v-for="value, key, index in object">
{{index}} - {{key}} : {{ value }}
li>
el : "#app",
data : {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
1.3 维护状态
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
key必须是唯一的，不可以重复。参考问题。
<div id="app">
<form>
<fieldset>
<p v-for="value,key in array">
var vm = new Vue({
el: "#app",
data: {
array: ["title", "author", "publishedAt"]
},
methods: {
changeArr: function () {
this.array.splice(1,0,'prize');
}
}
});
fieldset {
background-color: #f1f1f1;
border: none;
border-radius: 2px;
margin-bottom: 12px;
overflow: hidden;
padding: 0 .625em;
}
label {
cursor: pointer;
display: inline-block;
padding: 3px 6px;
text-align: right;
width: 150px;
vertical-align: top;
}
input {
font-size: inherit;
}
二 数组更新检测
2.1 变异方法
原本的数组将被更新
push() //push在数组末尾添加元素，返回添加元素以后的数组长度
pop() //pop弹出的是数组末尾元素，返回被弹出的元素值
shift() //弹出数组第一个元素，返回被弹出的元素值
unshift() //在数组第一个元素前插入元素
splice()
sort() //sort() 方法用于对数组的元素进行排序。
reverse()
2.2 替换数组
变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异方法，例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组。
2.3 无法识别
由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
- 当你利用索引直接设置一个数组项时，例如：
vm.items[indexOfItem] = newValue - 当你修改数组的长度时，例如：
vm.items.length = newLength
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
若要识别特定位置的更新，使用下面的方法：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
三 对象变更
Vue.set(vm.object, 'age', 27)
vm.$set(vm.object, 'age', 27)
vm.object= Object.assign({}, vm.object, {
age: 27,
favoriteColor: 'Vue Green'
})
源代码如下：
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<ul>
<li v-for="value, key, index in object" :key=key>
{{key}}:
<input :value=value />
li>
ul>
div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
});
script>
body>
html>
四 显示过滤/排序后的结果
<li v-for="n in evenNumbers">{{ n }}</li>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
在v-for中使用数值
<div id="app">
<span v-for="n in 10">{{n}}; span>
div>
效果如下：
五 v-for与v-if一起使用
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
#疑问
对象和属性
item里的是对象，object里的是属性。对象和属性分别要怎么用呢
items : [
{ message: 'Foo' },
{ message: 'Bar' }
],
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}