day02vue学习

最新推荐文章于 2024-07-12 14:17:28 发布
最新推荐文章于 2024-07-12 14:17:28 发布
阅读量951 收藏 20
点赞数 19
分类专栏： 黑马程序员vue学习笔记 文章标签： 学习 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WU3087676106/article/details/136694050
版权

day02

一、今日学习目标

1.指令补充

  1. 指令修饰符
  2. v-bind对样式增强的操作
  3. v-model应用于其他表单元素

2.computed计算属性

  1. 基础语法
  2. 计算属性vs方法
  3. 计算属性的完整写法
  4. 成绩案例

3.watch侦听器

  1. 基础写法
  2. 完整写法

4.综合案例 （演示）

  1. 渲染 / 删除 / 修改数量 / 全选 / 反选 / 统计总价 / 持久化

二、指令修饰符

1.什么是指令修饰符？

​ 所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码

2.按键修饰符

  • @keyup.enter —>当点击enter键的时候才触发

注意：如果不加 . 那么只要键盘按下了任意键就会触发绑定的事件。

代码演示：

  <div id="app">
    <h3>@keyup.enter  →  监听键盘回车事件</h3>
    <input @keyup.enter="add" v-model="username" type="text">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: ''
      },
      methods: {
        add(){
            
        }
      }
    })
  </script>

3.v-model修饰符

  • v-model.trim —>去除尾位空格
  • v-model.number —>转数字 如果不是数字，会原封不动的返回，而不是返回 NaN。

4.事件修饰符

  • @事件名.stop —> 阻止冒泡
  • @事件名.prevent —>阻止默认行为
  • @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为
 <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 20px;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>

 <div id="app">
    <h3>v-model修饰符 .trim .number</h3>
    姓名：<input v-model="username" type="text"><br>
    年纪：<input v-model="age" type="text"><br>

    
    <h3>@事件名.stop     →  阻止冒泡</h3>
    <div @click="fatherFn" class="father">
      <div @click.stop="sonFn" class="son">儿子</div>
    </div>

    <h3>@事件名.prevent  →  阻止默认行为</h3>
    <a @click.prevent href="http://www.baidu.com">阻止默认行为</a>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        age: '',
      },
      methods: {
        fatherFn () {
          alert('老父亲被点击了')
        },
        sonFn (e) {
          // e.stopPropagation()
          alert('儿子被点击了')
        }
      }
    })
  </script>

三、v-bind对样式控制的增强-操作class

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制 。

1.语法：

<div> :class = "对象/数组">这是一个div</div>

2.对象语法

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类，再布尔值的这个地方，还可以添加返回值是布尔值的表达式，

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

<div class="box" :class="{ 类名1: a === 1, 类名2: 布尔值 }"></div>

​ 适用场景：一个类名，来回切换

3.数组语法

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

使用场景:批量添加或删除类

注意：这里的 :class 中的类是只额外的添加 [] 中的类，并不会向js中的className一样直接覆盖原来的类。比如：

<div class="box" :class="[]"></div> // 这时的类名为 box 而不是[] 中的空类

4.代码练习

 <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px solid #000;
      font-size: 30px;
      margin-top: 10px;
    }
    .pink {
      background-color: pink;
    }
    .big {
      width: 300px;
      height: 300px;
    }
  </style>


<div id="app">
    <!--绑定对象-->
    <div class="box">黑马程序员</div>
    <!--绑定数组-->
    <div class="box">黑马程序员</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

四、京东秒杀-tab栏切换导航高亮

1.需求：

​ 当我们点击哪个tab页签时，哪个tab页签就高亮

2.实例代码:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      display: flex;
      border-bottom: 2px solid #e01222;
      padding: 0 10px;
    }

    li {
      width: 100px;
      height: 50px;
      line-height: 50px;
      list-style: none;
      text-align: center;
    }

    li a {
      display: block;
      text-decoration: none;
      font-weight: bold;
      color: #333333;
    }

    li a.active {
      background-color: #e01222;
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="(elem, index) in list"><a :class="{ active: index === activeIndex }" @click="activeIndex = index"
          href="#">{{ elem.name }}</a></li>
    </ul>
  </div>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        activeIndex: 0,
        list: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]
      }
    })
  </script>
</body>

3.思路：

1.基于数据，动态渲染tab（v-for）

2.准备一个下标 记录高亮的是哪一个 tab

3.基于下标动态切换class的类名

五、v-bind对有样式控制的增强-操作style

1.语法

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

2.代码练习

<style>
    .box {
      width: 200px;
      height: 200px;
      background-color: rgb(187, 150, 156);
    }
 </style>
  <div id="app">
    <div class="box" :style="{ 'background-color':'red' }"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

注意：上面的实例，:style 中的值是一个 JS 中的对象，要求是 键 ：值，其中键中是不能有 - 的因此可以使用给键添加 'background-color': 'red' 或者 "background-color": 'red' 的方式来解决，或者直接使用小驼峰命名法也可以解决，backgroundColor: 'red'，特别要注意的是，值也是必须添加 '' 或者 "" 的，不管是字符还是数字，都要加，否则会报错。

3.进度条案例

  <style>
    .progress {
      height: 25px;
      width: 400px;
      border-radius: 15px;
      background-color: #272425;
      border: 3px solid #272425;
      box-sizing: border-box;
      margin-bottom: 30px;
    }

    .inner {
      width: 50%;
      height: 20px;
      border-radius: 10px;
      text-align: right;
      position: relative;
      background-color: #409eff;
      background-size: 20px 20px;
      box-sizing: border-box;
      transition: all 1s;
    }

    .inner span {
      position: absolute;
      right: -20px;
      bottom: -25px;
    }
  </style>

<div id="app">
    <div class="progress">
      <div class="inner">  <div id="app">
    <div class="progress">
      <div :style="{ width: parent + '%' }" class="inner">
        <span>{{ parent }}%</span>
      </div>
    </div>
    <button @click="parent=25">设置25%</button>
    <button @click="parent=50">设置50%</button>
    <button @click="parent=75">设置75%</button>
    <button @click="parent=100">设置100%</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        parent: 0
      }
    })
  </script>
        <span>50%</span>
      </div>
    </div>
    <button>设置25%</button>
    <button>设置50%</button>
    <button>设置75%</button>
    <button>设置100%</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

六、v-model在其他表单元素的使用

1.讲解内容：

常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

输入框  input:text   ——> value
文本域  textarea	 ——> value
复选框  input:checkbox  ——> checked
单选框  input:radio   ——> checked
下拉菜单 select    ——> value
...

2.代码准备

  <style>
    textarea {
      display: block;
      width: 240px;
      height: 100px;
      margin: 10px 0;
    }
  </style>
  <div id="app">
    <h3>小黑学习网</h3>
    姓名：
    <input v-model="username" type="text">
    <br><br>
    是否单身：
    <input v-model="isSimple" type="checkbox">
    <br><br>
    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别:
    <input v-model="sex" name="sex" type="radio" value="1">男
    <input v-model="sex" name="sex" type="radio" value="0">女
    <br><br>
    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
    <select v-model="cityId">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">成都</option>
      <option value="104">南京</option>
    </select>
    <br><br>
    <!-- 
      自我描述其实就是一个大一点的 text 文本域 
    -->
    自我描述：
    <textarea v-model="desc"></textarea>
    <button>立即注册</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        isSimple: false,
        sex: 1,
        cityId: '103',
        desc: ''
      }
    })
  </script>

七、computed计算属性

1.概念

基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。

2.语法

  1. 声明在 computed 配置项中，一个计算属性对应一个函数
  2. 使用起来和普通属性一样使用 {{ 计算属性名}}

3.注意

  1. computed配置项和data配置项是同级的
  2. computed中的计算属性虽然是函数的写法，但他依然是个属性
  3. computed中的计算属性不能和data中的属性同名
  4. 使用computed中的计算属性和使用data中的属性是一样的用法
  5. computed中计算属性内部的this依然指向的是Vue实例

4.案例

比如我们可以使用计算属性实现下面这个业务场景
在这里插入图片描述

5.代码准备

<style>
    table {
      border: 1px solid #000;
      text-align: center;
      width: 240px;
    }
    th,td {
      border: 1px solid #000;
    }
    h3 {
      position: relative;
    }
  </style>

  <div id="app">
    <h3>小黑的礼物清单</h3>
    <table>
      <tr>
        <th>名字</th>
        <th>数量</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}个</td>
      </tr>
    </table>

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{{ count }} 个</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
        list: [
          { id: 1, name: '篮球', num: 9 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '铅笔', num: 5 },
        ]
      },
      computed: {
        count() {
          return this.list.reduce((pre, elem) => pre += elem.num, 0);
        }
      }
    })
  </script>

注意：computed 在使用的时候不需要添加括号就直接使用。

八、computed计算属性 VS methods方法

1.computed计算属性

作用：封装了一段对于数据的处理，求得一个结果

语法：

  1. 写在computed配置项中
  2. 作为属性，直接使用
    • js中使用计算属性： this.计算属性
    • 模板中使用计算属性：{{计算属性}}

2.methods计算属性

作用：给Vue实例提供一个方法，调用以处理业务逻辑。

语法：

  1. 写在methods配置项中
  2. 作为方法调用
    • js中调用：this.方法名()
    • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

3.计算属性的优势

  1. 缓存特性（提升性能）

    计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

    依赖项变化了，会自动重新计算 → 并再次缓存

  2. methods没有缓存特性，每一次使用都会重新调用结果。

  3. 通过代码比较

  4. computed 是一个计算属性，computed 的缓存特性相当于就是，将结果用一个变量存储起来了，估计是当成变量存放在创建的 vue 对象中的某个地方，当再次使用时会直接调用这个变量而不用重新调用 computed 的方法。但是 method 方法没有进行这种特性，每一次的使用就会重新调用这个函数，从而比较浪费性能。

<style>
    table {
      border: 1px solid #000;
      text-align: center;
      width: 300px;
    }
    th,td {
      border: 1px solid #000;
    }
    h3 {
      position: relative;
    }
    span {
      position: absolute;
      left: 145px;
      top: -4px;
      width: 16px;
      height: 16px;
      color: white;
      font-size: 12px;
      text-align: center;
      border-radius: 50%;
      background-color: #e63f32;
    }
  </style>

<div id="app">
    <h3>小黑的礼物清单🛒<span>?</span></h3>
    <table>
      <tr>
        <th>名字</th>
        <th>数量</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}个</td>
      </tr>
    </table>

    <p>礼物总数：{{ totalCount }} 个</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
        list: [
          { id: 1, name: '篮球', num: 3 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '铅笔', num: 5 },
        ]
      },
      computed: {
        totalCount () {
          let total = this.list.reduce((sum, item) => sum + item.num, 0)
          return total
        }
      }
    })
  </script>

4.总结

1.computed有缓存特性，methods没有缓存

2.当一个结果依赖其他多个值时，推荐使用计算属性

3.当处理业务逻辑时，推荐使用methods方法，比如事件的处理函数

九、计算属性的完整写法

既然计算属性也是属性，能访问，应该也能修改了？

  1. 计算属性默认的简写，只能读取访问，不能 “修改”
  2. 如果要 “修改” → 需要写计算属性的完整写法
  3. 注意计算属性的默认属性和完整属性这两种的写法是不相同的

在这里插入图片描述

完整写法代码演示

  <div id="app">
    姓：<input type="text" v-model="firstName"> +
    名：<input type="text" v-model="lastName"> =
    <span>{{ fullName }}</span><br><br>
    <button @click="change">改名卡</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: '刘',
        lastName: '备'
      },
      computed: {
        fullName: {
          // 当fullName计算属性被获取求值时，如果有缓存就会调用缓存的值，没有就会调用get函数，get函数的返回值作为fullName计算属性的新值。
          get() {
            return this.firstName + this.lastName;
          },
          // 当fullName被修改值时，会调用set函数，并且将修改后的值作为set函数的参数，将和get函数中的相关值修改就会更新fullName中的计算属性。
          set(value) {
            this.firstName = value.slice(0, 1);
            this.lastName = value.slice(1);
          }
        }
      },
      methods: {
        change() {
          this.fullName = '吕小布'
        }
      }
    })
  </script>

十、综合案例-成绩案例

在这里插入图片描述

功能描述：

1.渲染功能

2.删除功能

3.添加功能

4.统计总分，求平均分

思路分析：

1.渲染功能 v-for :key v-bind:动态绑定class的样式

2.删除功能 v-on绑定事件， 阻止a标签的默认行为

3.v-model的修饰符 .trim、 .number、 判断数据是否为空后 再添加、添加后清空文本框的数据

4.使用计算属性computed 计算总分和平均分的值

十一、watch侦听器（监视器）

1.作用：

​ 监视数据变化，执行一些业务逻辑或异步操作

2.语法：

  1. watch同样声明在跟data同级的配置项中

  2. 简单写法： 简单类型数据直接监视

  3. 完整写法：添加额外配置项

    data: { 
  words: '苹果',
  obj: {
    words: '苹果'
  }
},

watch: {
  // 该方法会在数据变化时，触发执行
  数据属性名 (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  }
}

watch: {
  words(newVaule, oldVaule){
    // 一些业务操作
  }
  'obj.words'(newVaule, oldVaule){
    // 一些业务操作
  }
}

3.侦听器代码准备

 <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 18px;
      }
      #app {
        padding: 10px 20px;
      }
      .query {
        margin: 10px 0;
      }
      .box {
        display: flex;
      }
      textarea {
        width: 300px;
        height: 160px;
        font-size: 18px;
        border: 1px solid #dedede;
        outline: none;
        resize: none;
        padding: 10px;
      }
      textarea:hover {
        border: 1px solid #1589f5;
      }
      .transbox {
        width: 300px;
        height: 160px;
        background-color: #f0f0f0;
        padding: 10px;
        border: none;
      }
      .tip-box {
        width: 300px;
        height: 25px;
        line-height: 25px;
        display: flex;
      }
      .tip-box span {
        flex: 1;
        text-align: center;
      }
      .query span {
        font-size: 18px;
      }

      .input-wrap {
        position: relative;
      }
      .input-wrap span {
        position: absolute;
        right: 15px;
        bottom: 15px;
        font-size: 12px;
      }
      .input-wrap i {
        font-size: 20px;
        font-style: normal;
      }
    </style>

 <div id="app">
      <!-- 条件选择框 -->
      <div class="query">
        <span>翻译成的语言：</span>
        <select>
          <option value="italy">意大利</option>
          <option value="english">英语</option>
          <option value="german">德语</option>
        </select>
      </div>

      <!-- 翻译框 -->
      <div class="box">
        <div class="input-wrap">
          <textarea v-model="words"></textarea>
          <span><i>⌨️</i>文档翻译</span>
        </div>
        <div class="output-wrap">
          <div class="transbox">{{ translation }}</div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      // 接口地址：https://applet-base-api-t.itheima.net/api/translate
      // 请求方式：get
      // 请求参数：
      // （1）words：需要被翻译的文本（必传）
      // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
      // -----------------------------------------------
      
      const app = new Vue({
      el: '#app',
      data: {
        words: '',
        translation: ''
      },
      // 具体讲解：(1) watch语法 (2) 具体业务实现
      watch: {
        words(newVaule) {
          clearTimeout(this.timer);
          this.timer = setTimeout(async () => {
            let p = await axios({
              url: 'https://applet-base-api-t.itheima.net/api/translate',
              params: {
                words: newVaule
              }
            });
            this.translation = p.data.data;
          }, 1000);
        }
      }
    })
    </script>

十二、翻译案例-代码实现

  <script>
      // 接口地址：https://applet-base-api-t.itheima.net/api/translate
      // 请求方式：get
      // 请求参数：
      // （1）words：需要被翻译的文本（必传）
      // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
      // -----------------------------------------------
      
      const app = new Vue({
        el: '#app',
        data: {
           //words: ''
           obj: {
            words: ''
          },
          result: '', // 翻译结果
          // timer: null // 延时器id
        },
        // 具体讲解：(1) watch语法 (2) 具体业务实现
        watch: {
          // 该方法会在数据变化时调用执行
          // newValue新值, oldValue老值（一般不用）
          // words (newValue) {
          //   console.log('变化了', newValue)
          // }

          'obj.words' (newValue) {
            // console.log('变化了', newValue)
            // 防抖: 延迟执行 → 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行
            clearTimeout(this.timer)
            this.timer = setTimeout(async () => {
              const res = await axios({
                url: 'https://applet-base-api-t.itheima.net/api/translate',
                params: {
                  words: newValue
                }
              })
              this.result = res.data.data
              console.log(res.data.data)
            }, 300)
          }
        }
      })
    </script>

十三、watch侦听器

1.语法

完整写法 —>添加额外的配置项

  1. deep:true 对复杂类型进行深度监听
  2. immdiate:true 初始化 立刻执行一次
data: {
  obj: {
    words: '苹果',
    lang: 'italy'
  },
},

watch: {// watch 完整写法
  对象: {
    deep: true, // 深度监视
    immdiate:true,//立即执行handler函数
    handler (newValue) {
      console.log(newValue)
    }
  }
}

2.需求

在这里插入图片描述

  • 当文本框输入的时候 右侧翻译内容要时时变化
  • 当下拉框中的语言发生变化的时候 右侧翻译的内容依然要时时变化
  • 如果文本框中有默认值的话要立即翻译

3.代码实现

 <script> 
      const app = new Vue({
        el: '#app',
        data: {
          obj: {
            words: '小黑',
            lang: 'italy'
          },
          result: '', // 翻译结果
        },
        watch: {
          obj: {
            deep: true, // 深度监视
            immediate: true, // 立刻执行，一进入页面handler就立刻执行一次
            handler (newValue) {
              clearTimeout(this.timer)
              this.timer = setTimeout(async () => {
                const res = await axios({
                  url: 'https://applet-base-api-t.itheima.net/api/translate',
                  params: newValue
                })
                this.result = res.data.data
                console.log(res.data.data)
              }, 300)
            }
          } 
        }
      })
    </script>

4.总结

watch侦听器的写法有几种？

1.简单写法

watch: {
  数据属性名 (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  }
}

2.完整写法

watch: {// watch 完整写法
  数据属性名: {
    deep: true, // 深度监视(针对复杂类型)
    immediate: true, // 是否立刻执行一次handler
    handler (newValue) {
      console.log(newValue)
    }
  }
}

十四、综合案例

购物车案例

在这里插入图片描述

需求说明：

  1. 渲染功能
  2. 删除功能
  3. 修改个数
  4. 全选反选
  5. 统计 选中的 总价 和 总数量
  6. 持久化到本地

实现思路：

1.基本渲染： v-for遍历、:class动态绑定样式

2.删除功能 ： v-on 绑定事件，获取当前行的id

3.修改个数 ： v-on绑定事件，获取当前行的id，进行筛选出对应的项然后增加或减少

4.全选反选

  1. 必须所有的小选框都选中，全选按钮才选中 → every
  2. 如果全选按钮选中，则所有小选框都选中
  3. 如果全选取消，则所有小选框都取消选中

声明计算属性，判断数组中的每一个checked属性的值，看是否需要全部选

5.统计 选中的 总价 和 总数量 ：通过计算属性来计算选中的总价和总数量

6.持久化到本地： 在数据变化时都要更新下本地存储 watch

峻峰耸立
关注
  • 19
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习Day9案例
04-30
在这个"Vue学习Day9案例"中，我们重点关注`Src`目录及其子目录`Src_ajax_user`，这通常代表了一个Vue应用的数据获取和用户管理模块。在这个案例中，我们将学习如何通过Ajax技术，尤其是使用Vue.js的内置HTTP接口`...
Vue基础day1学习资料.zip
03-31
"Vue基础day1学习资料.zip"这个压缩包包含了丰富的资源，适合初学者系统地学习Vue的基础知识。让我们逐一解析其中包含的内容。 首先，"2-案例"文件夹可能包含了一些实际的Vue应用示例，这些案例可以帮助你理解Vue的...
Vue学习day02笔记
m0_73158362的博客
06-03 963
一、今日学习目标 1.指令补充 指令修饰符 v-bind对样式增强的操作 v-model应用于其他表单元素 2.computed计算属性 基础语法 计算属性vs方法 计算属性的完整写法 成绩案例 3.watch侦听器 基础写法 完整写法 4.综合案例 （演示） 渲染 / 删除 / 修改数量 / 全选 / 反选 / 统计总价 / 持久化 二、指令修饰符 1.什么是指令修饰符？ ​ 所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码 2
vue学习day02
abining的博客
09-12 206
众所周知，在js中 ，new的作用是通过构建函数来构造一个实例对象。和普通函数不同的是，作为构造函数时，函数名称的首字母一般大写，以作区别。第二：函数式，构建函数在表达式的值区域，将方法一的表达式和它的值都存在函数里面，以return的形式输出。使用vue的指令，一般用字母v开头，如”v-bind“，”：“（这是v-bind 的简写）。第二：使用vue的功能，可以在外部指定，方法是“v.$mount("容器")第一：直接在表达式的值的区域 写入表达式和它的值。也有值，叫做表达式的值，是解析出来的。
Vue学习笔记day02
l1021351889的博客
02-28 256
小知识 findIndex 方法可以查找索引到数组中的值! 删除操作及注意事项 过滤器 {{ name | 过滤器的名称 }} 过滤器可以多次调用 全局过滤器可以应用于所有的vm实例 过滤器的调用采用就近原则，如果全局过滤器与私有过滤器的名称一样，优先调用私有过滤器 字符串的replace方法，第一个参数除了可以写为字符串之外，还可以写为一个正则表达式。 ...
vue 学习日志 day03
weixin_65423052的博客
03-27 464
键盘修饰符，过滤器，自定义指令
Vue基础day3学习资料.zip
03-31
总的来说，"Vue基础day3学习资料.zip"提供了一套完整的Vue学习路径，从理论到实践，覆盖了Vue全家桶的基础知识。通过系统学习这些资料，学习者不仅可以掌握Vue的基本语法，还能建立起对Vue生态系统的初步认识，为...
Vue基础day4学习资料.zip
03-31
在"Vue基础day4学习资料.zip"中，我们可以找到一系列资源来深入理解和掌握Vue的基础知识，特别是Vue全家桶（包括Vuex状态管理、Vue Router路由管理等）的基础内容。 首先，"day04_Vue01-基础语法3.ppt"很可能包含了...
Vue基础day2学习资料.zip
03-31
首先，"day02_Vue01-基础语法3.ppt"可能是一个关于Vue基础语法的演示文稿。这通常会覆盖以下内容： 1. **Vue实例**：Vue应用程序的核心是Vue实例，它通过`new Vue()`创建。实例可以包含数据、方法、生命周期钩子等...
爬虫学习日记
最新发布
wuhu_czy的博客
07-12 314
爬虫python code
Autoware.universe 高效学习第三章 -- 智驾技术务虚会之智驾技术栈讨论 其一
cy1641395022的博客
07-10 660
Autoware.universe 高效学习第三章 -- 智驾技术务虚会之智驾技术栈讨论 其一
“Numpy数据分析与挖掘：高效学习重点技能“
光就是羁绊之力，它会再度被某人继承，散发出耀眼的光。
07-10 945
在计算统计中，如果把nan的值替换为0进行统计，这样并不合适，替换之前的平均值如果大于0，替换之后均值肯定会变小；统计存在有nan的列，将nan的列中其它不等于nan的值进行mean求出均值，：小于15000的赋值为15000，大于等于50000的赋值为50000。：小于15000的赋值为0，大于等于15000的赋值为10。将统计除nan列的均值，再将均值赋值给当前列的nan值上；在数组运算中，不同的列，但是相同的行，是可以进行运算的；1.均匀分布：在相同的大小范围内的出现概率是等可能的；
jmeter-beanshell学习5-beanshell加减乘除运算
朱文宇的博客
07-08 297
jmeter使用beanshell，jmeter beanshell脚本编写，beanshell进行加减乘除运算
ROS基础学习-ROS运行管理
周陽讀書
07-11 544
ROS运行管理。
【安卓学习】文本切换器
m0_73241073的博客
07-08 639
文本切换器的使用
Python 学习中什么是异常处理，如何使用 try、except、finally ？
Itmastergo的博客
07-12 567
异常是程序执行过程中发生的非正常事件，这些事件会中断正常的程序指令流。当程序遇到错误时，Python 会抛出一个异常对象，异常对象包含了错误的类型和相关的信息。
Qt/QML学习-动画元素
QT、QML
07-12 432
Qt/QML学习-动画元素
NPDP含金量高吗？什么人适合学习NPDP？
PMP项目管理的博客
07-09 909
开始报名后先提交报名资料，通过审核后缴纳考试费用，即算报名成功；如果报名成功后被抽中审核了的话，则须提交相关资料进行资格审查，通过审查即可参加考试，未通过审核则会将考试费用退还给您；
vue大型电商项目尚品汇（后台篇）day01.doc
07-09
vue大型电商项目尚品汇（后台篇）day01.doc

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值