视频学习笔记02

视频学习笔记

vue中的v-model

v-model的本质

v-model实际是一个语法糖，本质是包含两个操作
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件

<input type="text" v-model="message">
<input type="text" :value="message" @input="message = $event.target.value">

v-model结合radio和checkbox使用

        <label for="">
            <input type="radio" id="male"  value="男" v-model="sex">男
        </label>
        <label for="">
            <input type="radio" id="female"  value="女" v-model="sex">女
        </label>

v-model具有数据的双向绑定，与radio一起用就可以将选中的sex返回到data中，checkbox也是类似的用法，选中的选项数据会被传到data中

<input type="checkbox" value="篮球" v-model="hobbies">阅读
<input type="checkbox" value="足球" v-model="hobbies">旅游

filter/map/reduce函数的使用

filter中的回调函数有一个要求：必须返回一个boolean值
true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中
false：当返回false时，函数内部会过滤掉这次的n值

举例：实现对数组nums = [10, 20, 33, 76, 343]操作选出小于100的数，并乘以5，最后相加。

const nums = [10, 20, 33, 76, 343]
let total = nums.filter(function (n) {
    return n < 100
}).map(function (n) {
    return n * 5
}).reduce(function (preValue, n) {
    return preValue + n
},0)

还有简洁的写法

let total = nums.filter(n => n < 100).map(n => n * 5).reduce((preValue, n) => preValue + n);

在vue中具有响应式的数组方法

            1.push方法 在最后添加一个元素
            this.letters.push('aaa')

            2.pop 删除数组中的最后一个元素
            this.letters.pop()

            3.shift 删除数组中的第一个元素
            this.letters.shift()

            4.unshift() 在数组最前面添加元素
            this.letters.unshift('aaa')

            5.splice() 删除元素，插入元素，替换元素
            splice(start开始的位置,传入要删除几个元素,传入替换或插入的元素)
            
            6.sort()排序和reverse()反转
            
            7.  set(要修改的值，索引值，修改后的值)
            Vue.set(this.letters, 0,'bbb')