vue-day2

绑定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检测数据的原理_对象