• VUE学习二：事件监听(v-on)、条件判断(v-if/v-else-if/v-else)、循环遍历(v-for)

    文章目录

    导言

    一、v-on指令:01-事件监听

    1. 01-v-on的基本使用.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-v-on的基本使用title>
head>
<body>

<div id="app">
  <h2>{{counter}}h2>
  
  
  
  <h1>第一种写法：直接写操作h1>
  <button v-on:click="counter++">+button>
  <button v-on:click="counter--;">-button>
  
  <h1>第二种写法：方法名h1>
  <button v-on:click="increment">+button>
  <button v-on:click="decrement">-button>
  
  <h1>第三种写法：语法糖  类似于 v-bind 等价于 :(冒号)h1>
  <button @click="increment">+button>
  <button @click="decrement">-button>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      // es5 写法
      increment: function() {
        this.counter++
      },
      // es6 增强写法
      decrement: function() {
        this.counter--
      }
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    在这里插入图片描述

    2. 02-v-on的参数问题.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-v-on的参数问题title>
head>
<body>

<div id="app">
  <h1>1.事件调用的方法没有参数(小括号可有可无)h1>
  <button @click="btn1Click()">按钮1button>
  <button @click="btn1Click">按钮1button><br/>

  
  <h1>2.在事件定义时, 写方法时省略了小括号, 但是方法本身是需要一个参数的,这个时候, Vue会默认将浏览器生产的event事件对象作为参数传入到方法h1>
  <button @click="btn2Click(123)">按钮2-1button>
  <button @click="btn2Click()">按钮2-2button>
  <button @click="btn2Click">按钮2-3button><br>

  
  
  <h1>3.方法定义时, 我们需要event对象, 同时又需要其他参数, 在调用方式, 如何手动的获取到浏览器参数的event对象: $eventh1>
  <button @click="btn3Click(abc, $event)">按钮3button>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      abc: 123
    },
    methods: {
      btn1Click() {
        console.log("btn1Click");
      },
      btn2Click(event) {
        console.log('--------', event);
      },
      btn3Click(abc, event) {
        console.log('++++++++', abc, event);
      }
    }
  })

  // 如果函数需要参数,但是没有传入, 那么函数的形参为undefined
  // function abc(name) {
  //   console.log(name);
  // }
  //
  // abc()
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57

    在这里插入图片描述

    3. 03-v-on的修饰符.html

    冒泡事件：外面的事件 触发 内层的事件

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on的修饰符title>
head>
<body>

<div id="app">
  
  <h1>1. .stop修饰符的使用: 阻止冒泡事件h1>
  <div @click="divClick">
    aaaaaaa
    <button @click.stop="btnClick">按钮button>
  div>

  <h1>2. .prevent 修饰符的使用：阻止默认事件h1>
  <br>
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  form>

  <h1>3. .监听某个键盘的键帽h1>
  
  <input type="text" @keyup.enter="keyUp"><br>

  <h1>4. .once修饰符的使用:只让第一次点击有效，以后再点无效h1>
  <button @click.once="btn2Click">按钮2button>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      btnClick() {
        console.log("btnClick");
      },
      divClick() {
        console.log("divClick");
      },
      submitClick() {
        console.log('submitClick');
      },
      keyUp() {
        console.log('keyUp');
      },
      btn2Click() {
        console.log('btn2Click');
      }
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    二、v-if和v-else：02-条件判断

    1. 01-v-if的使用.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-v-if的使用title>
head>
<body>

<div id="app">
  <h2 v-if="isShow">
    <div>abcdiv>
    <div>abcdiv>
    <div>abcdiv>
    <div>abcdiv>
    <div>abcdiv>
    {{message}}
  h2>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: true
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    在这里插入图片描述

    2. 02-v-if和v-else的使用.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-v-if和v-else的使用title>
head>
<body>

<div id="app">
  <h2 v-if="isShow">
    <div>abcdiv>
    <div>abcdiv>
    <div>abcdiv>
    <div>abcdiv>
    <div>abcdiv>
    {{message}}
  h2>
  
  <button v-else @click="isShow = !isShow">isShow为false时, 显示我,点击我就没啦button>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: false
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    在这里插入图片描述

    3. 03-v-if和v-else-if和v-else的使用.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-v-if和v-else-if和v-else的使用title>
head>
<body>

<div id="app">
  <h2 v-if="score>=90">优秀h2>
  <h2 v-else-if="score>=80">良好h2>
  <h2 v-else-if="score>=60">及格h2>
  <h2 v-else>不及格h2>
  
  <h1>{{result}}h1>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      score: 99
    },
    computed: {
      result() {
        let showMessage = '';
        if (this.score >= 90) {
          showMessage = '优秀'
        } else if (this.score >= 80) {
          showMessage = '良好'
        }
        // ...
        return showMessage
      }
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    在这里插入图片描述

    4. 04-用户登录切换的案例.html

    • 存在的问题：
      如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
      但是按道理讲，我们应该切换到另外一个input元素中了。
      在另一个input元素中，我们并没有输入内容。
      为什么会出现这个问题呢？
    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-用户登录切换的案例title>
head>
<body>



<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号label>
    <input type="text" id="username" placeholder="用户账号">
  span>
  <span v-else>
    <label for="email">用户邮箱label>
    <input type="text" id="email" placeholder="用户邮箱">
  span>
  <button @click="isUser = !isUser">切换类型button>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isUser: true
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    5. 05-用户登录切换的案例(小问题).html（解决上一节问题）

    • 问题解释：
      这是**因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素**。
      在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。

    • 解决方案：
      如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key
      并且我们需要保证key的不同

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05-用户登录切换的案例(小问题)title>
head>
<body>



<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号label>
    <input type="text" id="username" placeholder="用户账号" key="username">
  span>
  <span v-else>
    <label for="email">用户邮箱label>
    <input type="text" id="email" placeholder="用户邮箱" key="email">
  span>
  <button @click="isUser = !isUser">切换类型button>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isUser: true
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    6. 06-v-show的使用.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06-v-show的使用title>
head>
<body>

<div id="app">
  <h1>v-if: 当条件为false时, 包含v-if指令的元素, 根本就不会存在dom中h1>
  <h2 v-if="isShow" id="aaa">{{message}}h2>
  
  <h1>v-show: 当条件为false时, v-show只是给我们的元素添加一个行内样式: display: noneh1>
  <h2 v-show="isShow" id="bbb">{{message}}h2>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: true
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    在这里插入图片描述

    三、03-循环遍历

    1. 01-v-for遍历数组.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-v-for遍历数组title>
head>
<body>

<div id="app">
  
  <h1>1.在遍历的过程中,没有使用索引值(下标值)h1>
  <ul>
    <li v-for="item in names">{{item}}li>
  ul>
  
  
  <h2>2.在遍历的过程中, 获取索引值h2>
  <ul>
    <li v-for="(item, index) in names">
      {{index+1}}.{{item}}
    li>
  ul>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      names: ['why', 'kobe', 'james', 'curry']
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    在这里插入图片描述

    2. 02-v-for遍历对象.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-v-for遍历对象title>
head>
<body>

<div id="app">
  
  
  <h1>0.直接点出来属性h1>
  <ul>
    <li >{{info.name}}li>
    <li >{{info.age}}li>
    <li >{{info.height}}li>
  ul>
  
  
  <h1>1.在遍历对象的过程中, 如果只是获取一个值, 那么获取到的是valueh1>
  <ul>
    <li v-for="item in info">{{item}}li>
  ul>
  
  
  
  <h1>2.获取key和value 格式: (value, key)h1>
  <ul>
    <li v-for="(value, key) in info">{{value}}-{{key}}li>
  ul>
  
  
  
  <h1>3.获取key和value和index 格式: (value, key, index)h1>
  <ul>
    <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}li>
  ul>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: 'feng',
        age: 18,
        height: 1.88
      }
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

    在这里插入图片描述

    3. 03-v-for使用过程添加key.html

    input 表单中也可以加key，是为了怕复用
    也是二.4和二.5的问题

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-v-for使用过程添加keytitle>
head>
<body>



<div id="app">
  <ul>
    <li v-for="item in letters" :key="item">{{item}}li>
  ul>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ['A', 'B', 'C', 'D', 'E']
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    4. 04-哪些数组的方法是响应式的.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-哪些数组的方法是响应式的title>
head>
<body>

<div id="app">
  <ul>
    <li v-for="item in letters">{{item}}li>
  ul>
  <button @click="btnClick">按钮button>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ['a', 'b', 'c', 'd']
    },
    methods: {
      btnClick() {
        /*
        * push(), pop(), shift(), unshift(), splic(), sort(), reverse()
        * 以上都是响应式的 方法
        * Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。
        * Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
        * */
        /*
        * 1.push方法
        * */
        // this.letters.push('aaa')
        // this.letters.push('aaaa', 'bbbb', 'cccc')

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

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

        /*
        * 4.unshift(): 在数组最前面添加元素
        * */
        // this.letters.unshift()
        // this.letters.unshift('aaa', 'bbb', 'ccc')

        /*
        * 5.splice作用: 删除元素/插入元素/替换元素
        *
        * 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
        * splice(1, num) 从第 1 个开始，删除num个数
        * splice(1)      删除 第1个以后的所有元素
        * 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
        * splice(start, num, 。。。)：从第start个开始，后面的 num 个元素，都被后面的参数都代替
        * 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
        * */
        // splice(start): // 删除
        this.letters.splice(1, 3, 'm', 'n', 'l', 'x')  // 替换
        // this.letters.splice(1, 0, 'x', 'y', 'z') // 添加

        /*
        * 5.sort()
        * */
        // this.letters.sort()

        /*
        * 6.reverse()
        * */
        // this.letters.reverse()

        // 注意: 通过索引值修改数组中的元素
        // this.letters[0] = 'bbbbbb';
        // this.letters.splice(0, 1, 'bbbbbb')
        // set(要修改的对象, 索引值, 修改后的值)
        // Vue.set(this.letters, 0, 'bbbbbb')
      }
    }
  })
  
  /*
  * ...num：可变参数，数组类型
  * */
  function sum(...num) {
    console.log(num);
  }
  
  sum(20, 30, 40, 50, 601, 111, 122, 33)

script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98

    5. 05-作业的回顾和完成.html（同上一章：三.4）

    点谁，谁变红。
    和上一章中的三.4是一样的

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05-作业的回顾和完成title>
  <style>
    .active {
      color: red;
    }
  style>
head>
<body>

<div id="app">
  <ul>
    <li v-for="(item, index) in movies"
        :class="{active: currentIndex === index}"
        @click="liClick(index)">
      {{index}}.{{item}}
    li>
    
    
    
    
    
  ul>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      movies: ['海王', '海贼王', '加勒比海盗', '海尔兄弟'],
      currentIndex: 0
    },
    methods: {
      liClick(index) {
        this.currentIndex = index
      }
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    在这里插入图片描述

    四、04-书籍购物车案例

    1. index.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>书籍购物车案例title>
  <link rel="stylesheet" href="style.css">
head>
<body>
<div id="app">
  <div v-if="books.length">
    <table>
      <thead>
      <tr>
        <th>th>
        <th>书籍名称th>
        <th>出版日期th>
        <th>价格th>
        <th>购买数量th>
        <th>操作th>
      tr>
      thead>
      <tbody>
      <tr v-for="(item, index) in books">
        <td>{{item.id}}td>
        <td>{{item.name}}td>
        <td>{{item.date}}td>
        <td>{{item.price | showPrice}}td>
        <td>
          <button @click="decrement(index)" :disabled="item.count <= 1" >-button>
          {{item.count}}
          <button @click="increment(index)">+button>
        td>
        <td><button @click="removeHandle(index)">移除button>td>
      tr>
      tbody>
    table>
    <h2>总价格: {{totalPrice | showPrice}}h2>
  div>
  <h2 v-else>购物车为空h2>
div>

<script src="../../lib/vue.js">script>
<script src="main.js">script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    2. main.js

    const app = new Vue({
  el: '#app',
  data: {
    books: [
      {
        id: 1,
        name: '《算法导论》',
        date: '2006-9',
        price: 85.00,
        count: 1
      },
      {
        id: 2,
        name: '《UNIX编程艺术》',
        date: '2006-2',
        price: 59.00,
        count: 1
      },
      {
        id: 3,
        name: '《编程珠玑》',
        date: '2008-10',
        price: 39.00,
        count: 1
      },
      {
        id: 4,
        name: '《代码大全》',
        date: '2006-3',
        price: 128.00,
        count: 1
      },
    ]
  },
  computed: {
    totalPrice() {
      let totalPrice = 0
      for (let i = 0; i < this.books.length; i++) {
        totalPrice += this.books[i].price * this.books[i].count
      }
      return totalPrice

      // for (let i in/of this.books)
      // reduce
    }
  },
  methods: {
    decrement: function (index) {
      this.books[index].count--;
    },
    increment(index) {
      this.books[index].count++;
    },
    removeHandle(index) {
      this.books.splice(index, 1)
    }
  },
  filters: {
    showPrice(price) {
      return '¥' + price.toFixed(2)
    }
  }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63

    3. style.css

    table {
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}

th {
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    五、高阶函数.js

    // filter / map/ reduce
const nums = [10, 20, 30, 40, 50, 60, 70, 80, 90]

let n =nums.filter(function (n) {
  return n < 100;
}).map(function (n) {
  return n*2;
}).reduce(function (preValue, n) {
  return preValue+n;
});
console.log(n);
let m = nums.filter(n=>n<100).map(n=>n*2).reduce((preValue, n)=>preValue+n);
console.log(m);

/*
* 需求1：取出所有小于100的数组
* */
// 解决方法1
let newNums = []
for (let i of nums){
  if (i<100){
    newNums.push(i)
  }
}
console.log(newNums);

// 解决方法2
let newNums1 = nums.filter(function (n) {
return n<100;
})
console.log(newNums1);

/*
* 需求2：将所有小于100的数字进行转化：全部 * 2
* */
let new2Nums = []
for (let i of newNums){
  new2Nums.push(i*2)
}
console.log(new2Nums);

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

/*
* 需求3：将所有的 new2nums 数字相加，得到最终的结果
* */
let total=0
for (let n of new2Nums){
  total+=n
}
console.log(total);

let total1 = new2Nums.reduce(function (preValue, book) {
  return preValue+ book
}, 0)
console.log(total1);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
  • 相关阅读:
    免费api推荐，各种各样的都有～
    HCIP（第十四天）
    【JavaSE】集合专项练习篇（附源码）
    人工蜂群优化及其在资源管理中的应用（Matlab代码实现）
    运行gazebo机器人模型没有cmd_vel话题
    Python实现SSA智能麻雀搜索算法优化LightGBM回归模型(LGBMRegressor算法)项目实战
    Nginx
    Windows 安装 A UDP/TCP Assistant 网络调试助手
    Delphi Xe 10.3 钉钉SDK开发——审批流接口（获取表单ProcessCode）
    Rocky Linux团队组建的超豪华领导人团队
  • 原文地址：https://blog.csdn.net/qq_40036754/article/details/126092925