普通的列表使用ul包含多个li实现，这样往往不够灵活。在原生js中能够动态渲染列表具体实现如下
<body>
<ul id="list"></ul>
</body>
<script type="text/javascript">
var list = document.querySelector('#list')
for (var i = 0; i < 5; i++) {
var li = document.createElement('li')
li.innerHTML = i
list.appendChild(li)
}
</script>
我们再看看vue中如何实现列表渲染的
<body>
<div id="app">
<ul>
<li v-for="i in list">{{i}}</li>
</ul>
</div>
</doby>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
list:[1,2,3,4,5]
}
})
通过js原生实现与vue实现两者代码的对比，我们可以发现实现同一个需求vue要方便得多。
vue列表渲染详讲
在用v-for进行列表渲染的时候其实会出现两个参数
<body>
<div id="app">
<h1>数组</h1>
<ul>
<li v-for="(i,j,k) in list">{{i}}--{{j}}--{{k}}</li>
</ul>
<h1>对象</h1>
<ul>
<li v-for="(i,j) in obj">{{i}}--{{j}}</li>
</ul>
<h1>字符串</h1>
<ul>
<li v-for="(i,j) in str">{{i}}--{{j}}</li>
</ul>
<h1>指定次数</h1>
<ul>
<li v-for="(i,j) in 10">{{i}}--{{j}}</li>
</ul>
</div>
<ul id="list">
</ul>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
list: [1, 2, 3, 4, 5],
obj: { 'name': 'zs', 'age': 18 },
str: 'hello'
}})
</script>上面代码在v-for后通过i与j接收循环的参数
从上面代码可以知道v-for可以遍历：数组、对象、字符串、指定次数(数值)。另外可以看到页面中每次都输出了两个数，分别是i与j每次接收到的值，这两个数具体的值是什么呢？其实i就是循环list时接收到的list中保存的数据，而j呢则是每个数据的索引值或者是key。
有人会想v-for是否还有第三个参数呢？在这我们可以试验一下
<ul>
<li v-for="(i,j,k) in list">{{i}}--{{j}}--{{k}}</li>
</ul>
我们可以看到最后的k并没有被渲染出来，这是因为k没有接收到参数，所以其值为undefined。而在vue中如果值为undefined的话是不会被渲染出来的。因此也能说明v-for是没有第三个参数的
key
在上面v-for对相关数据进行遍历时能很顺利的使用，并且也没有多大的错误。但是现在呢我需要将数据与用户进行交互，实现以下功能：页面中布有一按钮以及一无序列表ul，ul中的每个li后面都带有一输入框，当用户点击按钮时就会在数组最前方插入一条数据。先用之前的方法来实现一下
<body>
<div id="app">
<button @click='add'>添加</button>
<h1>数组</h1>
<ul>
<li v-for="(i,j) in list">{{i.name}}--{{i.age}}<input type="text"></li>
</ul>
</div>
<ul id="list">
</ul>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
list: [
{ name: 'zs', age: 18 },
{ name: 'ls', age: 19 }
],
},
methods: {
add() {
this.list.unshift({ name: 'ww', age: 20 })
}
}
})
</script>
我们可以看到当点击添加按钮后{name:'ww',age:20}能成功加入到数组中并在页面中渲染出来。接下来我们再演示一下在每个li中的input中输入对应的姓名后再点击添加按钮。
发现点击添加按钮后原本属于ww的空白输入框却到了ls后面，这明显不符合我们的需求。要如何才能避免这种情况产生呢？添加一个key
<body>
<div id="app">
<button @click='add'>添加</button>
<h1>数组</h1>
<ul>
<li v-for="(i,j) in list" :key="i.id">{{i.name}}--{{i.age}}<input type="text"></li>
</ul>
</div>
<ul id="list">
</ul>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
list: [
{id:'001', name: 'zs', age: 18 },
{id:'002', name: 'ls', age: 19 }
],
},
methods: {
add() {
this.list.unshift({id:'003', name: 'ww', age: 20 })
}
}
})
</script>
这个代码对list中的数据进行了重构，在每组对象中都添加了一个id值用来作为key要绑定的值，页面呈现的结果正是我们所想要的。为什么加个key后就会使之前的问题迎刃而解呢？接下来我们就来具体看看key的作用。
key的作用
key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】之后Vue会根据【新虚拟DOM】与【旧虚拟DOM】的差异比较
key对比规则
- 旧虚拟DOM中找到了与新虚拟DOM相同的key：若虚拟DOM中内容没变，直接使用之前的真实DOM;若虚拟DOM中内容变了，则生成新的真实DOM,随后替换掉页面中之前的真实DOM
- 旧虚拟DOM中未找到与新虚拟DOM相同的key，这种情况下会创建新的真实DOM，随后渲染到页面上。
为什么不能用index作为key
- 如果对数据进行逆序添加、删除等破坏顺序的操作，会产生没有必要的真实DOM更新，界面效果没问题
- 如果结构中还包含输入（input）类的DOM,会产生错误DOM更新，会导致界面问题
如何选择key
- 最好使用每条数据唯一标识作为key如：id、身份证等
- 如果不存在对数据的逆序添加、删除等破坏顺序操作，仅用于渲染列表用于展示则可以用index作为key
为什么没有绑定key时会出现这种问题呢？是因为如果没有设置key那么key默认为绑定为index，所以key值尽量不要设置为index
列表的过滤
实现如百度搜索中的关键字索引
- 用watch实现
<body>
<div id="app">
<input type="text" v-model='critical'>
<ul>
<li v-for="str in list">{{str}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
critical: '',
list: [],
lists: ['i love you', 'hello', 'yes', 'no', 'english', 'error']
},
watch: {
critical: {
immediate: true,
handler(val) {
this.list = this.lists.filter((str) => {
if (str.indexOf(val) !== -1) return true
else return false
})
}
}
}
})
</script>- 用computed实现
<body>
<div id="app">
<input type="text" v-model='critical'>
<ul>
<li v-for="str in list">{{str}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
critical: '',
lists: ['i love you', 'hello', 'yes', 'no', 'english', 'error']
},
computed: {
list() {
return this.lists.filter((str) => {
if (str.indexOf(this.critical) !== -1) return true
else return false
})
}
}
})
</script>
过滤前
过滤后
列表排序
<body>
<div id="app">
<input type="text" v-model='critical'>
<button @click="sortType=1">降序</button>
<button @click="sortType=2">升序</button>
<button @click="sortType=0">原序</button>
<ul>
<li v-for="str in list">{{str.name}}--{{str.age}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
critical: '',
sortType: 0,
lists: [{ 'name': 'zs', 'age': 12 }, { 'name': 'ww', 'age': 13 }, { 'name': 'ls', 'age': 2 }, { 'name': 'lily', 'age': 5 }]
},
computed: {
list() {
let arr = this.lists.filter((str) => {
if (str.name.indexOf(this.critical) !== -1) return true
else return false
})
if (this.sortType) {
arr.sort((a, b) => {
return this.sortType === 1 ? a.age - b.age : b.age - a.age
})
}
return arr
}
}
})
</script>
未排序前
降序排序
