绑定class样式
:class="" (v-bind的缩写)
修改vue维护的数据，而非直接操作dom
绑定style，内联样式，交给vue管理（要对象，或者数组）
font-size -> fontSize 换位驼峰
⭐⭐⭐vue条件渲染
v-show 底层 -> 调整style行内样式， display：none
v-if dom节点都没了，彻底没了，没这个结构
选择：切换频率高，建议用v-show
template 最终渲染出来会被脱掉，注意：template只能配合v-if，不能配合v-show
好处：不用多写个div包裹<h2>破坏结构
⭐⭐⭐列表渲染
唯一标识也可以用index
in 也可以换成 of
重点是遍历数组！！！
key是vue在使用，在渲染为真实dom之后，dom上实际没有这个key
key原理讲解举例：特殊情况：
所以：数据的唯一标识最好由后端提供
列表过滤+列表排序
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="搜索" v-model="keyWord">
<button @click="sortRule = 2">按年龄升序</button>
<button @click="sortRule = 1">按年龄降序</button>
<button @click="sortRule = 0">默认</button>
<ul>
<li v-for="(item,index) in tempArr" :key="index">
{{item.name}} - {{item.age}} - {{item.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data() {
return {
keyWord: '',
sortRule: 0, // 0 默认，1 降序， 2 升序
persons: [
{id: '001', name: '马冬梅', age: 18, sex: '女'},
{id: '002', name: '周冬雨', age: 20, sex: '女'},
{id: '003', name: '周杰伦', age: 14, sex: '男'},
{id: '004', name: '温兆伦', age: 13, sex: '男'}
]
}
},
methods: {},
// 基于计算属性实现
computed: {
tempArr() {
const arr = this.persons.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1
})
if (this.sortRule) {
arr.sort((p1, p2) => {
// 简化：三元表达式
if (this.sortRule === 1) {
return p2.age - p1.age
} else {
return p1.age - p2.age
}
})
}
return arr
}
}
})
</script>
computed执行条件，computed里面所使用到的变量一旦发生变化，则computed会重新执行
⭐⭐⭐更新时的问题
vue检测数据的原理_对象