Vue核心基础4：绑定样式、条件渲染、列表渲染
1 绑定样式
【代码】
绑定样式
test
test11
test
{{name}}
{{name}}
2 条件渲染
【代码】
条件渲染
hello {{name}}
hello {{name}}
hello {{name}}
hello222 {{name}}
bye {{name}}
你好
hello
say
bye
3 列表渲染
【代码】
列表渲染
- 姓名：{{p.name}} ---- 年龄：{{p.age}}
汽车信息
-
{{key}}: {{value}}
遍历字符串
- {{index}}-{{char}}
遍历指定次数
- {{index}}-{{number}}
3.1 v-for 中 key 的作用
分析：因为以索引号作为key, 所以首先是找到相同的key进行比对，如果标签内容不相同，则用新的替换旧的。因为比对的是虚拟DOM, 所以不管input中有没有内容，都是一样的。所以在比对的时候，会复用原来的input。这里就会出现问题了
这里用id 作为key 就不会由上述index作为key 的问题
3.2 列表过滤
方法1：可以用watch属性实现
人员列表 (列表过滤)
- 姓名：{{p.name}} ---- 年龄：{{p.age}} ---- 性别：{{p.sex}}
const x = new Vue({
el: '#root',
data: {
name: 'Vue',
keyWord: '',
persons: [
{ id: '001', name: '张三', age: 18, sex: '男' },
{ id: '002', name: '张杰', age: 19, sex: '男' },
{ id: '003', name: '张韶涵', age: 20, sex: '女' },
{ id: '004', name: '章若楠', age: 21, sex: '女' },
{ id: '005', name: '周杰伦', age: 22, sex: '男' }
],
filterPersons: []
},
watch: {
keyWord: {
immediate: true,
// indexOf 字符串中是否包含某个字符
handler(val) {
this.filterPersons = this.persons.filter(p => p.name.indexOf(val) !== -1)
}
}
}
方法2：使用computed属性实现
const x = new Vue({
el: '#root',
data: {
name: 'Vue',
keyWord: '',
persons: [
{ id: '001', name: '张三', age: 18, sex: '男' },
{ id: '002', name: '张杰', age: 19, sex: '男' },
{ id: '003', name: '张韶涵', age: 20, sex: '女' },
{ id: '004', name: '章若楠', age: 21, sex: '女' },
{ id: '005', name: '周杰伦', age: 22, sex: '男' }
]
},
computed: {
filterPersons() {
return this.persons.filter(p => p.name.indexOf(this.keyWord) !== -1)
}
}
})
3.3 列表排序
【代码】
人员列表 (列表排序)
- 姓名：{{p.name}} ---- 年龄：{{p.age}} ---- 性别：{{p.sex}}