-
v-for (特殊 v-for=“n in 10”)
a. in
b. of -
key:
*跟踪每个节点的身份,从而重用和重新排序现有元素
*理想的 key 值是每项都有的且唯一的 id。data.id
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<style>
.active {
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li v-for="(data,index) in datalist" key="data">
{{data}}--{{index}}
</li>
</ul>
<ul>
<li v-for="(data,index) of datalist">
{{data}}--{{index}}
</li>
</ul>
<ul>
<li v-for="(data,key) in obj">
{{data}}--{{key}}
</li>
</ul>
<ul>
<li v-for="(data,key) of obj">
{{data}}--{{key}}
</li>
</ul>
<ul>
<li v-for="n in 10">
{{n}}
</li>
</ul>
</div>
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#box",
data: {
datalist: ["111", "222", "333"],
obj: {
name: "kerwin",
age: 100,
location: "dalian"
}
}
})
</script>
</body>
</html>
- 数组更新检测
a. 使用以下方法操作数组,可以检测变动 push() pop() shift() unshift() splice() sort() reverse()
b. filter(), concat() 和 slice() ,map(),新数组替换旧数组
c. 不能检测以下变动的数组 vm.items[indexOfItem] = newValue
vm.datalist.push("555")
vm.datalist
vm.datalist.concat(["6666","77777"])
vm.datalist
//通过索引值修改
vm.datalist
(3) ["111", "222", "333", __ob__: Observer]
vm.datalist[0]
"111"
vm.datalist[0]="tiramisu"
"tiramisu"
vm.datalist
(3) ["tiramisu", "222", "333", __ob__: Observer]
//原数组被改变但是视图并不更新
解决
(1)Vue.set(example1.items, indexOfItem, newValue)
(2)splice
//通过Vue.set(example1.items, indexOfItem, newValue) 修改
Vue.set(vm.datalist,0,"tiramisu")
"tiramisu"
//视图改变
//可通过splice方法修改
vm.datalist.splice(0,1,"tramisu")
["111"]
//视图被更新
- 应用:显示过滤结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
</head>
<body>
<div id="box">
<input type="text" @input="handleInput()" v-model="mytext" />
<!-- <input type="text" @input="handleInput" /> -->
<ul>
<li v-for="data in datalist">
{{data}}
</li>
</ul>
</div>
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
//["aaa","bbb","ccc","ddd","add","cee","eee"]
var vm = new Vue({
el: "#box",
data: {
mytext: '',
datalist: ["aaa", "bbb", "ccc", "ddd", "add", "cee", "eee"],//过滤会修改数组
list: ["aaa", "bbb", "ccc", "ddd", "add", "cee", "eee"] //可另外定义一组用于过滤
},
methods: {
handleInput() {
console.log(this.mytext)
// console.log("只要value改变,就会触发")
//利用输入框的字符, 过滤出包含字段的元素
//filter 过滤
var newlist = this.list.filter(item => item.indexOf(this.mytext) > -1)
// console.log(newlist,this.datalist)
this.datalist = newlist;
// 计算属性
}
}
})
var arr = [1, 2, 3, 4, 5]
var newlist = arr.filter(item => item >= 3)
console.log(newlist)
</script>
</body>
</html>