高阶函数，双向绑定
2021-05-07 本文已影响0人
大佬教我写程序
高阶函数
// 高阶函数 函数式编程
//filter/map/reduce
const arr = [1, 2, 1, 56, 1, 5, 1, 66, 12]
//根据return的是true还是false来筛选出来对应的元素
let farr = arr.filter(function(n) {
return n < 6
})
console.log(farr);
//将数组的所有元素乘以2
let marr = farr.map(function(n) {
return n * 10
})
console.log(marr);
// preValue指的是上一个值，0代表最初的值是0，n指的是数组元素，进行的操作就是累加
let rarr = marr.reduce(function(preValue, n) {
return preValue + n
}, 0)
console.log(rarr);
//综合写法
let sarr = arr.filter(function(n) {
return n < 6
}).map(function(n) {
return n * 10
}).reduce(function(preValue, n) {
return preValue + n
}, 0)
console.log(sarr);
array.filter(Boolean)
- 等价于
array.filter((item) => {return Boolean(item)})
作用：去除数组中为“假”的元素（0、undefined、null、NaN、''、false）
image.png
- findIndex （会获得‘你好’所在数组的下标 index,找不到就会返回-1）
array.findIndex(function(currentValue, index, arr), thisValue)
const Index = basic.findIndex(item => item === '你好');
- forEach
array.forEach(function(currentValue, index, arr), thisValue)
过滤器
使用方法：
<td>{{item.price* item.count | totalPrice}}
filters: {
// a就是item.price
totalPrice(a) {
return '￥' + a.toFixed(2)
}
}
// Vue3不支持过滤器了, 推荐两种做法: 使用计算属性/使用全局的方法
filterBooks() {
return this.books.map(item => {
const newItem = Object.assign({}, item);
newItem.price = "¥" + item.price;
return newItem;
})
}
- filter过滤器
返回包含this.keyvalue字符串的数据
showNumber(){
return this.numbers.filter(item=>{return item.indexOf(this.keyvalue)!==-1})
}
- 数组的map函数
/返回一个数组，包含categories里面所有单个元素对象的cat_name的值
categories.map((item) => {
return item.cat_name
})
-
findIndex
-
every
空数组也会返回true
v-model双向绑定
- v-model和input（text、textarea）
<div id="app">
<!-- <input type="text" v-model='message'> -->
<input type="text" v-bind:value='message' v-on:input='message = $event.target.value'>
<h2>{{message}}</h2>
</div>
<body>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
</script>
- v-model和input（radio）
<body>
<div id="app">
<input type="radio" v-model='sex' value="男">男
<input type="radio" v-model='sex' value="女">女
</div>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
sex: '男'
}
})
</script>
</body>
-
v-model option多选
image.png
<div id="app">
<!-- multiple多重的多样的 -->
<select name="" id="" v-model='fruits' multiple>
<option value="芒果" >芒果</option>
<option value="番茄">番茄</option>
<option value="樱桃">樱桃</option>
<option value="香蕉">香蕉</option>
<option value="黄瓜">黄瓜</option>
</select>
<h2>您选择的水果是：{{fruits}}</h2>
</div>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
fruits: []
}
})
</script>
-
值绑定
image.png
<div id="app">
<label :for="item" v-for='item in hobbies'>
<input type="checkbox" :id='item' :value="item" v-model='hobby'>{{item}}
</label>
<h2>你选择的是：{{hobby}}</h2>
</div>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
hobby: [],
hobbies: ['吃饭', '喝水', '玩手机', '打游戏', '睡觉']
}
})
</script>
组件的v-model
image.png
组件绑定两个v-model
image.png
