02、JS高阶函数、v-model表单的双向绑定

2023-12-25 10:40:58

JavaScript高阶函数的使用

JS中的for循环

/* 普通的for循环 */
for (let i = 0; i < this.books.length; i++) {
    total += this.books[i].count * this.books[i].price;
}

/* let i in this.books i是索引 */
for (let i in this.books) {
    total += this.books[i].count * this.books[i].price;
}

/* let item of this.books item是数组的元素 */
for (let item of this.books) {
    total += item.price * item.count;
}

JS中与数组有关的高阶函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>

  /* filter/map/reduce
  * filter中的回调函数必须返回一个boolean值,当返回true时函数内部会自动将这次回调的n加入到新的数组中,当返回false时函数内部会过滤掉这次n
  * map的回调函数用来处理元素，而filter的回调函数是用来过滤元素，返回原数组中的某些元素
  * reduce的回调函数用来对数组进行汇总
  *  */

  //1、filter函数的使用
  const nums = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
  let newArray = nums.filter(function (n) {
    return n % 20 === 0;
  });
  console.log(newArray);
  /* [20, 40, 60, 80, 100] */

  //2、map函数的使用
  let newArray2 = newArray.map(function (n) {
    return n * 2;
  });
  console.log(newArray2);
  /* [40, 80, 120, 160, 200] */

  //3、reduce函数的使用,两个参数,第二个参数为初始化值
  let total = newArray2.reduce(function (preValue, currValue) {
    /* preValue是上一次返回的值 */
    return preValue + currValue;
  }, 0);
  console.log(total);
  /* 600 */

  /* 4、链式编程 */
  let number = nums.filter(function (n) {
    return n > 80;
  }).map(function (n) {
    return n / 2;
  }).reduce(function (preValue, currValue) {
    return preValue + currValue;
  }, 0);
  console.log(number);
  /* 95 */

  /* 5、箭头函数 */
  let sum = nums.filter((n) => n > 80).map((n) => n / 2).reduce((preValue, currValue) => preValue + currValue, 0);
  console.log(sum);
</script>
</body>
</html>

改进for循环计算总价格

/* reduce() */
return this.books.reduce(function (preValue,currValue) {
    return preValue + currValue.count * currValue.price;
}, 0).toFixed(2);

v-model表单输入绑定

Vue中使用v-model指令实现表单元素和数据的双向绑定。

v-model的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model</title>
</head>
<body>
  <div id="app">
    <label for="name">
      <input type="text" placeholder="edit me" v-model="message" id="name">
      message is : {{message}}
    </label>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js.',
      }
    });
  </script>
</body>
</html>

v-model的原理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model</title>
</head>
<body>
  <div id="app">
    <label for="name">
      <!-- v-bind:value：单向绑定，v-on:input: 监听输入事件 -->
      <!--<input type="text" id="name" placeholder="edit me" v-bind:value="message" v-on:input="valueChange">-->
      <input type="text" id="name" placeholder="edit me" v-bind:value="message" v-on:input="message = $event.target.value">
      message is : {{message}}
    </label>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue',
      },
      methods: {
        valueChange(event) {
          this.message = event.target.value;
        }
      }
    });
  </script>
</body>
</html>

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

v-model和radio的结合---单选框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model</title>
</head>
<body>
  <div id="app">
    <!-- 当v-model绑定的是同一个数据时,可以没有name属性 -->
    <label for="male">
      <input type="radio" id="male" v-model="gender" value="男">男
    </label>
    <label for="female">
      <input type="radio" id="female" v-model="gender" value="女">女
    </label>
    <br />
    <span>你选择了{{gender}}</span>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        gender: '男', /* 默认选中 */
      }
    });
  </script>
</body>
</html>

v-model和checkbox的结合---多选框

单个复选框：boolean
多个复选框：数组类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model</title>
</head>
<body>
<div id="app">
  <label for="checkbox">
    <input type="checkbox" id="checkbox" v-model="checked">I accept.
  </label>
  <br/>
  <span v-if="checked">您选择了同意协议</span>
  <span v-else>您没有同意协议</span>
  <br/>
  <button v-bind:disabled="!checked">下一步</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      checked: false,
    }
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model</title>
</head>
<body>
<div id="app">
  <!-- 一个label绑定一个input -->
  <label for="basketball">篮球</label>
  <input type="checkbox" id="basketball" value="basketball" v-model="hobbies">
  <label for="football">足球</label>
  <input type="checkbox" id="football" value="football" v-model="hobbies">
  <label for="music">音乐</label>
  <input type="checkbox" id="music" value="music" v-model="hobbies">
  <label for="film">电影</label>
  <input type="checkbox" id="film" value="film" v-model="hobbies">
  <br />
  <span>您的爱好是:{{hobbies}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      hobbies: []
    }
  })
</script>
</body>
</html>

v-model结合select标签

单选：一个值（省市区）
多选：爱好

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model</title>
</head>
<body>
<div id="app">
  <select v-model="selected">
    <option disabled>请选择</option>
    <option value="A" >A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <span>你选择了{{selected}}</span>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      selected: 'A' /* 默认选中 */
    }
  })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model</title>
</head>
<body>
<div id="app">
  <select v-model="selected">
    <option disabled>请选择</option>
    <option value="A" >A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <span>你选择了{{selected}}</span>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      selected: 'A' /* 默认选中 */
    }
  })
</script>
</body>
</html>

修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model</title>
</head>
<body>
<div id="app">
  <!-- 1、.lazy修饰符 -->
  <label for="name">用户名：</label>
  <input type="text" id="name" v-model.lazy="message">
  <span>message is {{message}}</span>
  <br />

  <!-- 2、.number修饰符 -->
  <label for="age">年龄：</label>
  <input type="number" id="age" v-model.number="age">
  <span>{{typeof age}}</span>
  <br />

  <label for="password">密码：</label>
  <input type="text" id="password" v-model.trim="password">
  <span>{{password}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js.',
      age: 12,
      password: ''
    }
  });
</script>
</body>
</html>

码农公寓

JavaScript高阶函数的使用

v-model表单输入绑定

相关文章