Vue学习记录day04：js高级函数（filter/map/reduce）的使用、v-model的使用

于 2020-12-09 11:49:17 发布
阅读量311 收藏 1
点赞数
分类专栏： 大前端 文章标签： vue javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45441466/article/details/110917667
版权

js高级函数（filter/map/reduce）

 编程范式： 命令式编程/声明式编程
 编程范式： 面向对象编程(第一公民：对象)/函数式编程(第一公民：函数)  
 编程范式详情可查看：https://www.cnblogs.com/sirkevin/p/8283110.html

  1. filter

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



    #1.需求：取出所有小于一百的数字
const nums = [10,20,80,40,60,110];
let numbers = nums.filter(function (n) {
  return n<100 ? true:false;
});
console.log(numbers);

// ==== 或者

const nums = [10,20,80,40,60,110];
let numbers = nums.filter(n => n<100);
console.log(numbers);

  2. map

    map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。
map()方法按照原始数组元素顺序依次处理元素。 
map不会对空数组进行检测 
map不会改变原始数组 

    #2.需求：将数组中的数字进行转化：全部*2

  const nums = [10, 20, 80, 40, 60, 110];

  let numbers = nums.map(n => n * 2);
  console.log(numbers);
// 或者

  let numbers1 = nums.map(function (n) {
    return n * 2;
  });
  console.log(numbers1)

  3. reduce

    reduce作用：对数组中所有的内容进行汇总
    注意: reduce() 对于空数组是不会执行回调函数的。

语法：

arr.reduce(callback,[initialValue])

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

callback （执行数组中每个值的函数，包含四个参数）

    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）
#3.需求：将所有里面的数字相加，得到最终的结果
  const nums = [10, 20, 80, 40, 60, 110];

  let number = nums.reduce((previousValue, currentValue) => {
    return previousValue + currentValue;
  }, 0);
  console.log(number);

// 或者 

  let number1 = nums.reduce(function (previousValue, currentValue) {
    return previousValue + currentValue;
  }, 0);
  console.log(number1);

 

实战训练：

  const nums = [10, 20, 80, 40, 60, 110];

//需求：计算数组中元素小于100 乘以2 累加的和

  let number = nums.filter(n => n < 100)
    .map(n => n * 2)
    .reduce(((previousValue, currentValue) => {
      return previousValue + currentValue;
    }), 0);

  console.log(number);

 

Vue中v-model的使用

  1. v-model的基本使用 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
  {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      el: '#app',
      data: {
          message : '你好'
      }
  })
</script>
</body>
</html>
  2. v-model的原理 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--  <input type="text" v-model="message">-->
  <!--双向绑定原理：
  v-model其实是一个语法糖，它的背后本质上市包含两个操作：
  1.v-bind绑定一个value属性
  2.v-on指令给当前元素绑定input事件
  -->
<!--  <input type="text" :value="message" @input="valueChange">-->
  <input type="text" :value="message" @input="message = $event.target.value">
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      valueChange(event) {
        this.message = event.target.value;
      }
    }
  })
</script>
</body>
</html>
  3. v-model结合radio类型 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <label for="male">
    <input type="radio" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" value="女" v-model="sex">女
  </label>
  <h2>您选择的性别是：{{sex}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      sex: '男'
    }
  })
</script>
</body>
</html>

     

  4. v-model结合checkbox类型 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <label for="isAgree">
    <input type="checkbox" id="isAgree" v-model="isAgree">是否同意
  </label>
  <h2>你选择的是：{{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>

  <!--2.checkbox多选框-->
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="美女" v-model="hobbies">美女
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>您的爱好是：{{hobbies}}</h2>

  <!--值绑定：动态的给value赋值-->
  <label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
  </label>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      sex: '男',
      isAgree: false,
      hobbies: [],//多选框
      originHobbies: ['篮球', '足球', '乒乓球', '台球', '棒球']
    }
  })
</script>
</body>
</html>

     

  5. v-model结合select类型 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--1.选择一个-->
  <select name="abc"  v-model="fruit">
    <option value="西瓜" >西瓜</option>
    <option value="苹果" >苹果</option>
    <option value="香蕉" >香蕉</option>
    <option value="哈密瓜" >哈密瓜</option>
  </select>
  <h2>您选择的水果是:{{fruit}}</h2>

  <!--2.选择多个-->
  <select name="abc"  v-model="fruits" multiple>
    <option value="西瓜" >西瓜</option>
    <option value="苹果" >苹果</option>
    <option value="香蕉" >香蕉</option>
    <option value="哈密瓜" >哈密瓜</option>
  </select>
  <h2>您选择的水果是:{{fruits}}</h2>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      fruit: '香蕉',
      fruits: []
    }
  })
</script>
</body>
</html>

     

  6. v-model修饰符的使用 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--1.修饰符:lazy
  默认情况下，v-model默认是在input事件中同步输入框的数据的。
  也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
  lazy修饰符可以让数据在失去焦点或者回车时才会更新：
  -->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>

  <!--2.修饰符：number-->
  <input type="number" v-model.number="age">
  <h2>{{age}} --- {{typeof age}}</h2>

  <!--3.修饰符：trim-->
  <input type="text" v-model.trim="name">
  <h2>您输入的名字：{{name}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      age: '',
      name: ''
    }
  })
</script>
</body>
</html>

     

 

 

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值