【二】Vue之基础

最新推荐文章于 2024-08-31 22:02:55 发布

Chimengmeng

最新推荐文章于 2024-08-31 22:02:55 发布

阅读量132

点赞数

文章标签： vue.js 前端 javascript ecmascript 前端框架

本文链接：https://blog.csdn.net/Chimengmeng/article/details/132138606

版权

【一】条件渲染

指令	释义
v-if	相当于： if
v-else	相当于：else
v-else-if	相当于：else if

在Vue中，条件渲染是一种根据特定条件决定是否显示或隐藏元素的方式。
Vue提供了v-if、v-else和v-else-if指令来实现条件渲染。

【1】`v-if`指令：

v-if指令用于根据表达式的真假值来决定是否渲染元素。
- 如果表达式的值为真，则元素会被渲染到DOM中；
- 如果值为假，则元素会从DOM中移除。
示例代码：

<div v-if="isShow">Hello World</div>

在上述代码中
- 当isShow为true时，<div>元素会被渲染到DOM中
- 否则不会。

【2】`v-else`指令：

v-else指令必须紧跟在带有v-if或者v-else-if指令的元素之后
- 用于在前一个条件不满足时渲染该元素。
示例代码：

<div v-if="isShow">Hello World</div>
<div v-else>Goodbye World</div>

在上述代码中
- 当isShow为true时，第一个<div>元素会被渲染；
- 当isShow为false时，第二个<div>元素会被渲染。

【3】`v-else-if`指令：

v-else-if指令用于在多个条件之间进行切换。
- 它必须跟在带有v-if指令或者另一个v-else-if指令的元素之后。
示例代码：

<div v-if="status === 'A'">Status A</div>
<div v-else-if="status === 'B'">Status B</div>
<div v-else>Status C</div>

在上述代码中，根据不同的status值，会显示不同的提示信息。

【4】总结：

通过v-if、v-else和v-else-if指令，在Vue中可以实现条件渲染，根据特定条件来决定是否显示或隐藏元素。
这样可以根据不同的条件动态地展示不同的内容，使界面更加灵活和智能。

【5】案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if、else if、else</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <h3>案例：if、else if、else</h3>
    <h2 v-if="type==='1'">A</h2>
    <h2 v-else-if="type==='2'">B</h2>
    <h2 v-else>C</h2>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            type: '1',
        }
    })
</script>
</html>

【二】列表渲染

【1】`v-if`+`v-for`+`v-else`控制购物车商品的显示

v-if、v-for和v-else是Vue中常用的指令，它们可以结合使用来实现复杂的条件渲染和循环列表操作。

(1)`v-if`指令：

v-if指令用于根据表达式的真假值来条件性地渲染元素或组件。
当表达式为真时，渲染该元素或组件；当表达式为假时，将其从DOM中移除。
可以搭配v-else指令一起使用来定义条件为假时要渲染的内容。

(2)`v-for`指令：

v-for指令用于对数组或对象进行循环遍历，生成相应的多个元素或组件。
在使用v-for时，可以通过每项迭代的数据来动态地渲染元素或组件。
通常结合:key属性一起使用，为每个循环项指定唯一的标识，以优化性能和避免渲染错误。

(3)`v-else`指令：

v-else指令用于与v-if结合使用，表示一个“否则”的块。
v-else元素必须紧跟在带有v-if或v-else-if的元素后面，作为其兄弟节点。

(4)小案例

结合使用v-if、v-for和v-else可以实现更复杂的条件渲染和循环操作：

<div>
  <div v-if="condition1">
    // 渲染某个元素或组件
  </div>
  <div v-else-if="condition2">
    // 渲染另一个元素或组件
  </div>
  <div v-else>
    // 渲染其他元素或组件
  </div>
  <div v-for="item in items" :key="item.id">
    // 循环渲染数组中的元素或组件
  </div>
</div>

在上述代码中
- 当满足condition1时，会渲染第一个div；
- 当满足condition2时，会渲染第二个div；
- 如果条件都不满足，则会渲染第三个div。
同时，v-for指令会遍历数组items中的每个元素，并根据数组项生成相应的div，通过:key属性来优化循环渲染。
总结：通过灵活运用v-if、v-for和v-else指令，我们可以实现复杂的条件渲染和列表操作，让Vue的模板更具动态性和适应性。

(5)控制购物车商品的显示案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if + v-for + v-else控制购物车商品的显示</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        table, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>我的购物车</h2>
    <button @click="show">刷新购物车</button>
    <br><br>
    <table v-if="!shopping_car.length==0">
        <tr>
            <td>商品名称</td>
            <td>价格</td>
        </tr>
        <tr v-for="item in shopping_car">
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
        </tr>
    </table>
    <table v-else>
        <tr>
            <td>商品名称</td>
            <td>价格</td>
        </tr>
        <tr>
            <td>暂无信息</td>
            <td>暂无信息</td>
        </tr>
    </table>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            isActive: false,
            shopping_car: []
        },
        methods: {
            show() {
                this.shopping_car = [
                    {name: 'Threadripper 3990X', price: '29999元'},
                    {name: 'NVIDIA RTX 8000', price: '59999元'},
                    {name: 'ROG ZENITH II EXTREME', price: '9999元'},
                ]
            }
        }
    })
</script>
</html>

【2】`v-for`遍历数组(列表)、对象(字典)、数字

v-for指令在Vue中可以用于遍历数组(列表)、对象(字典)以及数字，让我们逐个渲染它们的每个元素或属性。

(1)遍历数组(列表)：

使用v-for指令遍历数组时，可以通过指定数组的名称和当前项的引用来动态生成多个元素或组件。
例如：

<div>
  <div v-for="item in array" :key="item.id">
    {{ item }}
  </div>
</div>

在上述代码中，array是一个数组，通过v-for="item in array"指定了当前项的引用为item，然后在<div>元素中使用{{ item }}输出当前项的内容。

(2)遍历对象(字典)：

使用v-for指令遍历对象时，可以通过指定对象的名称和键值对的引用来动态生成多个元素或组件。
例如：

<div>
  <div v-for="(value, key) in object" :key="key">
    {{ key }}: {{ value }}
  </div>
</div>

在上述代码中，object是一个对象，通过v-for="(value, key) in object"同时指定了键值对的引用，然后在<div>元素中使用{{ key }}和{{ value }}分别输出键和值的内容。

(3)遍历数字：

使用v-for指令遍历数字时，可以通过指定一个数字范围来动态生成多个元素或组件。
例如：

<div>
  <div v-for="num in 5" :key="num">
    {{ num }}
  </div>
</div>

在上述代码中，v-for="num in 5"指定了从1到5的数字范围，然后在<div>元素中使用{{ num }}输出当前数字。

(4)总结：

通过使用v-for指令，我们可以轻松遍历数组(列表)、对象(字典)以及数字，并根据需要动态地生成对应的元素或组件。
这为我们在Vue中处理动态数据提供了强大的能力。

(5)案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for遍历数组(列表)、对象(字典)</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        table, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>数组(列表)for循环遍历</h2>
    <ul>
        <li v-for="(value,index) in list_test">{{index}} —— {{value}}</li>
    </ul>

    <h2>对象(字典)for循环遍历</h2>
    <ul>
        <li v-for="(value,key) in dic_test">{{key}} —— {{value}}</li>
    </ul>

    <h2>数组(列表)套对象(字典)for循环遍历</h2>
    <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>国籍</td>
        </tr>
        <tr v-for="info in summary_test">
            <td>{{info.name}}</td>
            <td>{{info.age}}</td>
            <td>{{info.gender}}</td>
            <td>{{info.country}}</td>
        </tr>
    </table>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            list_test: ['First', 'second', 'Third', 'Forth', 'Fifth'],
            dic_test:{name: 'Darker', age: 18, gender: 'male'},
            summary_test: [
                    {name: 'Alan', age: 23, gender: 'male', country: 'America'},
                    {name: 'Ben', age: 15, gender: 'male', country: 'Australia'},
                    {name: 'Cindy', age: 12, gender: 'female', country: 'Japan'},
                    {name: 'Darker', age: 18, gender: 'male', country: 'China'},
                    {name: 'Elisa', age: 26, gender: 'female', country: 'Mexico'},
                ]
        }
    })
</script>
</html>

注意！在Vue中：

数组的index和value是反的
对象的key和value也是反的

【3】key值的解释

vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度(虚拟DOM用了diff算法)

在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一

页面更新之后，会加速DOM的替换(渲染)

:key="变量"

在Vue中，key是用来标识节点的特殊属性。
- 它主要用于帮助Vue识别和跟踪每个节点的身份，以便在进行列表渲染时能够高效地更新DOM。
当使用v-for指令对数组或对象进行循环遍历时，Vue会创建一个虚拟DOM节点的列表。
- 在进行列表更新时，Vue会通过比较新旧虚拟DOM节点的key值，来确定节点的变化情况并进行相应的更新操作。

(1)唯一标识：

在进行列表渲染时，为每个节点添加唯一的key属性，用来标识该节点。这样Vue可以根据节点的key来准确判断哪些节点是新增、修改或删除的，提高页面的渲染效率和性能。

(2)列表动态添加元素：

当在列表中动态添加元素时，Vue会根据每个节点的key值来定位要插入的位置，而不是直接将新元素添加到列表的末尾。
如果不使用key属性，Vue无法正确追踪新元素的位置，导致插入错误的位置或者出现重复的元素。

(3)列表元素的顺序改变：

在进行列表渲染时，如果改变了列表元素的顺序，而且没有提供key属性，Vue无法区分新旧节点的关系。
使用了key属性后，Vue可以通过比较key的值来确定变动节点的位置和更新，避免不必要的DOM操作。

(4)优化DOM更新：

当列表中的元素发生更改时，Vue会使用一种高效的算法(diff算法)来比较新旧节点的变化，只对真正发生变化的部分进行更新，提高页面渲染的速度和性能。

(5)综上所述

使用key属性可以帮助Vue在进行列表渲染时高效地跟踪节点的变化，并进行准确的DOM更新，从而提高页面渲染的性能和用户体验。
因此，在使用v-for循环渲染数组或对象时，建议为每个节点添加唯一的key属性。

【4】数组更新与检测

(1)可以检测到变动的数组操作：

[1]push：最后位置添加

将元素添加到数组的末尾
push()方法是用于将一个或多个元素添加到数组的末尾。它返回修改后的数组的新长度。
例如，array.push(item1, item2, ...)。
- item1, item2, ...：要添加到数组末尾的一个或多个元素。

示例：

const array = [1, 2, 3];
const length = array.push(4, 5);
console.log(array); // [1, 2, 3, 4, 5]
console.log(length); // 5

在上面的示例中
- 我们使用push()方法向数组末尾添加了两个元素4和5。
- 然后，我们通过const length = array.push(4, 5)将新数组的长度存储在length变量中，length的值为5。
- 最终的数组为[1, 2, 3, 4, 5]。
需要注意的是
- push()方法会修改原始数组，并返回新数组的长度。
- 这是一个常用的数组操作方法，特别适用于需要动态追加元素的情况，如在循环中添加数据或实现栈的功能。
总结：
- push()方法是用于将一个或多个元素添加到数组的末尾，它会修改原始数组并返回新数组的长度。
- 这是一个常用的数组操作方法，在需要向数组末尾添加元素时非常有用。

[2]pop：最后位置删除

从数组的末尾删除元素
pop()方法用于从数组的末尾删除一个元素，并返回被删除的元素。
例如，array.pop()。

示例：

const array = [1, 2, 3, 4, 5];
const removedElement = array.pop();
console.log(array); // [1, 2, 3, 4]
console.log(removedElement); // 5

在上面的示例中
- 我们使用pop()方法从数组末尾删除了最后一个元素5。
- 然后，我们将被删除的元素存储在removedElement变量中，removedElement的值为5。
- 最终的数组为[1, 2, 3, 4]。
需要注意的是
- pop()方法会修改原始数组，并返回被删除的元素。
- 这是一个常用的数组操作方法，特别适用于需要从数组末尾删除元素的情况，如实现栈的功能或者对数组进行动态调整。
总结：
- pop()方法用于从数组的末尾删除一个元素，并返回被删除的元素。
- 它会修改原始数组。该方法常用于需要删除数组末尾元素的操作。

[3]shift：第一个位置删除

删除数组的第一个元素
shift()方法用于删除数组的第一个元素，并返回被删除的元素。
例如，array.shift()。
示例：

const array = [1, 2, 3, 4, 5];
const removedElement = array.shift();
console.log(array); // [2, 3, 4, 5]
console.log(removedElement); // 1

在上面的示例中
- 我们使用shift()方法从数组的开头删除了第一个元素1。
- 然后，我们将被删除的元素存储在removedElement变量中，removedElement的值为1。
- 最终的数组为[2, 3, 4, 5]。
需要注意的是
- shift()方法会修改原始数组，并返回被删除的元素。
- 这是一个常用的数组操作方法，特别适用于需要从数组开头删除元素的情况，如实现队列的功能或者对数组进行动态调整。
总结：
- shift()方法用于删除数组的第一个元素，并返回被删除的元素。
- 它会修改原始数组。该方法常用于需要删除数组开头元素的操作。

[4]unshift：第一个位置添加

将元素添加到数组的开头
unshift()方法用于将一个或多个元素添加到数组的开头，并返回修改后的数组的长度。
例如，array.unshift(element1, element2, ...)。
示例：

const array = [2, 3, 4, 5];
const newLength = array.unshift(1);
console.log(array); // [1, 2, 3, 4, 5]
console.log(newLength); // 5

在上面的示例中
- 我们使用unshift()方法将元素1添加到数组的开头。
- 然后，我们打印修改后的数组[1, 2, 3, 4, 5]，以及unshift()方法返回的新数组长度5。
需要注意的是
- unshift()方法会修改原始数组，并返回修改后的数组的新长度。
- 可以通过添加多个参数来一次性添加多个元素到数组的开头。
总结：
- unshift()方法用于将一个或多个元素添加到数组的开头，并返回修改后的数组的长度。
- 它会修改原始数组。该方法常用于需要向数组头部添加元素的操作。

[5]]splice：从数组中添加或删除元素(切片效果)

splice()是一个可以在数组中添加或删除元素的方法。
- 它接受三个参数：
  - 起始索引
  - 删除的元素个数
  - 可选的要插入的新元素。
例如，array.splice(start, deleteCount, item1, item2, ...)。
- start：
  - 指定要修改的起始索引位置。
- deleteCount：
  - 指定要删除的元素个数。
- item1, item2, ...：
  - 可选参数，在 start 位置插入的新元素。
splice() 可以实现切片效果，通过指定起始索引和删除的元素个数可以从数组中获取一部分子数组。
示例：

const array = [1, 2, 3, 4, 5];

// 删除第2位开始的两个元素，并插入新元素
const removed = array.splice(1, 2, 'a', 'b');
console.log(array); // [1, 'a', 'b', 4, 5]
console.log(removed); // [2, 3]

在上面的示例中，splice() 方法首先删除了从索引 1 开始的两个元素(即数字2和3)，然后插入了两个新元素(即字符'a'和'b')。
- 最终的数组为 [1, 'a', 'b', 4, 5]。
需要注意的是，splice()方法会修改原始数组，并且它还可以通过返回一个被删除子数组的方式提供反馈信息。
- 在示例中，我们通过const removed = array.splice(1, 2, 'a', 'b')将被删除的元素存储在 removed 数组中，它的值为 [2, 3]。这样，我们可以在需要时使用这些被删除的元素。
总结：
- splice()方法可以在数组中进行切片操作，通过指定起始索引和删除的元素个数，我们可以删除并插入新的元素。
- 这是一个常用的数组操作方法，在Vue中也能被检测到变动。

[6]sort：排序

对数组进行排序
sort()方法用于对数组中的元素进行排序，默认是按照字符编码的顺序进行排序。
- 如果想要按照其他方式进行排序，可以提供一个比较函数作为参数。
例如，array.sort(compareFunction)。
比较函数是可选的，用于指定排序规则。
- 它需要接受两个参数，表示要进行比较的两个元素。
- 比较函数应该返回一个负数、零或正数，分别表示第一个参数小于、等于或大于第二个参数。
- 根据返回值，sort()方法会决定元素的顺序。
示例：

const array = [3, 1, 4, 2, 5];
array.sort();
console.log(array); // [1, 2, 3, 4, 5]

在上面的示例中
- 我们对数组进行了排序，默认按照字符编码的顺序进行排序。
- 因此，最终的结果是数组的元素从小到大排列。
如果希望按照其他顺序进行排序
- 可以使用比较函数。
- 比如，按照数字大小进行排序：

const array = [3, 1, 4, 2, 5];
array.sort((a, b) => a - b);
console.log(array); // [1, 2, 3, 4, 5]

在上面的示例中，我们提供了一个比较函数(a, b) => a - b，该函数将数组元素从小到大排序。
总结：
- sort()方法可以用于对数组进行排序，默认按照字符编码的顺序进行排序。
- 可以通过提供一个比较函数来指定排序规则，自定义排序方式。注意，sort()方法会修改原始数组。

[7]reverse：反转

倒转数组的顺序
reverse()方法用于反转数组中元素的顺序，将数组中的第一个元素变为最后一个，最后一个元素变为第一个，依此类推。
例如，array.reverse()。
这个方法会修改原始数组，不会创建新的反转数组。
示例：

const array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // [5, 4, 3, 2, 1]

在上面的示例中
- 我们调用了reverse()方法来反转数组的顺序。
- 最终的结果是数组中的元素被倒转，第一个元素成为了最后一个元素，最后一个元素成为了第一个元素。
注意
- reverse()方法会修改原始数组，而不是创建一个新的反转后的数组。
- 如果想要保留原始数组并创建一个新数组，可以使用Array.from()方法或者扩展运算符。

const array = [1, 2, 3, 4, 5];
const reversedArray = Array.from(array).reverse();
console.log(reversedArray); // [5, 4, 3, 2, 1]
console.log(array); // [1, 2, 3, 4, 5]

或者使用扩展运算符：

const array = [1, 2, 3, 4, 5];
const reversedArray = [...array].reverse();
console.log(reversedArray); // [5, 4, 3, 2, 1]
console.log(array); // [1, 2, 3, 4, 5]

总结：
- reverse()方法可以用于倒转数组的顺序，将数组中的元素反转过来。
- 注意，这个方法会修改原始数组，而不是创建一个新的反转后的数组。

(2)检测不到变动的数组操作：

[1]filter()：过滤

返回符合条件的元素组成的新数组
filter()方法用于创建一个新的数组，其中包含满足指定条件的所有元素。
该方法接受一个回调函数作为参数，并对数组中的每个元素调用该回调函数。
- 回调函数应返回一个布尔值，表示该元素是否应包含在过滤后的数组中。
  - 如果回调函数返回 true，则该元素将被包含在新数组中
  - 如果返回 false，则将被排除在外。
示例：

const array = [1, 2, 3, 4, 5];
const filteredArray = array.filter(element => element > 2);
console.log(filteredArray); // [3, 4, 5]

在上面的示例中
- 我们使用 filter() 方法过滤了数组 array。
- 回调函数 (element => element > 2) 的作用是判断元素是否大于 2。
- 返回值为 true 则表示元素大于 2，将被包含在新数组 filteredArray 中。
- 最终得到的 filteredArray 为 [3, 4, 5]，只包含大于 2 的元素。
需要注意的是，filter() 方法不会修改原始数组，而是返回一个新的过滤后的数组。
如果需要进一步操作过滤后的数组，可以链式调用其他数组方法。

const array = [1, 2, 3, 4, 5];
const filteredArray = array.filter(element => element > 2).map(element => element * 2);
console.log(filteredArray); // [6, 8, 10]

在上面的示例中
- 我们首先使用 filter() 方法过滤出大于 2 的元素
- 然后使用 map() 方法对过滤后的数组中的每个元素进行乘以 2 的操作。
- 最终得到的结果为 [6, 8, 10]。
总结：
- filter() 方法可以用于创建一个新的数组，其中包含满足指定条件的所有元素。
- 该方法不会修改原始数组，而是返回一个新的过滤后的数组。

[2]concat()：追加另一个数组

将多个数组合并为一个新数组
concat() 方法用于将多个数组或值合并成一个新数组。
该方法可以接受任意数量的参数，每个参数可以是一个数组或一个值。
- 它会按照参数的顺序依次将它们合并到一个新数组中。
示例：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];

const newArray = array1.concat(array2, array3);
console.log(newArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

在上面的示例中
- 我们首先创建了三个数组 array1、array2 和 array3。
- 然后，通过调用 array1 的 concat() 方法，并传入 array2 和 array3 作为参数，将这三个数组合并成一个新数组 newArray。
- 最终得到的 newArray 为 [1, 2, 3, 4, 5, 6, 7, 8, 9]。
需要注意的是
- concat() 方法不会修改原始数组，而是返回一个新的合并后的数组。
- 如果参数是数组，则会将该数组中的元素依次添加到新数组的末尾；
- 如果参数是值，则将该值添加到新数组的末尾。
除了数组和值，concat() 方法还可以接受其他类型的参数，如字符串、对象等。

const array = [1, 2, 3];
const str = 'Hello';
const obj = { name: 'John', age: 25 };

const newArray = array.concat(str, obj);
console.log(newArray);
// [1, 2, 3, 'Hello', { name: 'John', age: 25 }]

在上面的示例中
- 我们将字符串 'Hello' 和对象 { name: 'John', age: 25 } 作为参数传入 concat() 方法。
- 最终得到的 newArray 包含了数组 array 的元素、字符串 'Hello' 和对象 { name: 'John', age: 25 }。
总结：
- concat() 方法用于将多个数组或值合并成一个新数组。
- 它不会修改原始数组，而是返回一个新的合并后的数组。

[3]slice()：

返回指定索引范围内的元素组成的新数组
slice() 方法用于返回一个新数组，其中包含从原始数组中指定索引范围内的元素。
该方法可以接受两个参数
- 分别表示起始索引和结束索引(不包括结束索引对应的元素)。
- 如果省略第二个参数，则 slice() 方法会一直截取到原始数组的末尾。
示例：

const array = [1, 2, 3, 4, 5];

const newArray = array.slice(1, 4);
console.log(newArray); // [2, 3, 4]

在上面的示例中，我们首先创建了一个数组 array。
- 然后，通过调用 array 的 slice() 方法，并传入起始索引 1 和结束索引 4 作为参数，创建了一个新数组 newArray。
- 最终得到的 newArray 包含了索引 1 到索引 3(不包括索引 4 对应的元素)之间的元素 [2, 3, 4]。
需要注意的是，slice() 方法不会修改原始数组，而是返回一个新的数组。
- 如果省略起始索引，则默认为 0，即从原始数组的开头截取；
- 如果省略结束索引，则默认为原始数组的长度，即截取到原始数组的末尾。
除了正整数索引外，slice() 方法还支持使用负值索引的方式来截取数组。
- 负值索引表示从数组的末尾开始计算，例如 -1 表示最后一个元素，-2 表示倒数第二个元素，依此类推。

const array = [1, 2, 3, 4, 5];

const newArray = array.slice(-3, -1);
console.log(newArray); // [3, 4]

在上面的示例中
- 我们使用负值索引来截取数组。
- 通过 slice() 方法，我们得到了索引 -3 到索引 -2(不包括索引 -1 对应的元素)之间的元素 [3, 4]。
总结：
- slice() 方法用于返回一个新数组，其中包含从原始数组中指定索引范围内的元素。
- 它不会修改原始数组，而是返回一个新的数组。
- 如果省略第二个参数，则截取到原始数组的末尾。
- 该方法还支持使用负值索引来截取数组。

[4]map()：

通过对数组中的每个元素执行函数操作，生成一个新数组
map() 方法是 JavaScript 数组的一个高阶函数，它通过对数组中的每个元素执行指定的函数操作，生成一个新的数组。
map() 方法需要传入一个函数作为参数，这个函数将被依次应用到原始数组的每个元素上。
- 在函数中，我们可以对元素进行一些操作，并返回一个处理后的值。
- map() 方法会将每个函数的返回值按照原始数组的顺序存储到一个新的数组中，最终返回这个新的数组。
示例：

const array = [1, 2, 3, 4, 5];

const newArray = array.map((element) => {
  return element * 2;
});

console.log(newArray); // [2, 4, 6, 8, 10]

在上面的示例中
- 我们首先创建了一个数组 array。然后，通过调用 array 的 map() 方法，并传入一个函数 (element) => { return element * 2; } 作为参数，对数组中的每个元素进行乘以 2 的操作。
- map() 方法会将每个元素乘以 2 的结果存储到一个新的数组 newArray 中，并返回这个新的数组。
- 最终得到的 newArray 为 [2, 4, 6, 8, 10]，即原始数组中的每个元素乘以 2 后的结果。
map() 方法还有一个可选的第二个参数，用于指定在函数中执行操作时的 this 上下文。
- 如果省略该参数，则默认为 undefined。

const array = [1, 2, 3, 4, 5];

const context = {
  multiplier: 3,
};

const newArray = array.map(function(element) {
  return element * this.multiplier;
}, context);

console.log(newArray); // [3, 6, 9, 12, 15]

在上面的示例中
- 我们通过传入第二个参数 context 来指定函数中的 this 上下文对象。
- 在函数中，我们可以通过 this.multiplier 访问到 context 对象中的属性值，并将元素与 multiplier 相乘。
- 最终得到的 newArray 为 [3, 6, 9, 12, 15]。
总结：
- map() 方法通过对数组中的每个元素执行函数操作，生成一个新的数组。
- 它将原始数组的每个元素传入指定的函数中，并将每个函数的返回值按照原始数组的顺序存储到一个新的数组中并返回。
- 可以通过传入第二个参数来指定函数执行时的 this 上下文。

(3)原因：

作者重写了相关方法(只重写了一部分方法，但是还有另一部分没有重写)

这些操作之所以无法被Vue检测到变动，是因为Vue只重写了部分数组方法来实现响应式。
因此，在执行这些操作时，虽然数据会发生改变，但视图不会自动更新。

(4)解决方法：

通过直接修改数组的索引值来更新数组。
- 例如，vm.arrayList[0] = 'Darker'。
- 这样可以更新数组的值，但视图不会自动更新。
使用Vue.set(对象, index/key, value)方法来更新数组。
- 例如，Vue.set(vm.arrayList, 0, 'Darker')。
- 通过这种方式修改数组，Vue可以检测到变动并更新对应的视图。

// 方法1：通过 索引值 更新数组(数据会更新，但是页面不会发生改变)
vm.arrayList[0]
"Alan"
vm.arrayList[0]='Darker'
"Darker"

// 方法2：通过 Vue.set(对象, index/key, value) 更新数组(数据会更新，页面也会发生改变)
Vue.set(vm.arrayList, 0, 'Darker')

【三】事件处理

【1】详解

事件	释义
input	当输入框进行输入的时候触发的事件
change	当元素的值发生改变时触发的事件
blur	当输入框失去焦点的时候触发的事件

change 和 blur 最本质的区别：

如果输入框为空，失去焦点后，change不会触发，但是blur会触发

(1)`input` 事件：当输入框进行输入时触发的事件。

含义：input 事件是在用户对输入框进行输入(包括键盘输入和粘贴操作)时触发的。它可以实时地监听输入框的变化，并且在每次输入时都会触发。
使用场景：input 事件通常被用于实时校验用户的输入或者对输入内容进行实时的反馈或处理。比如，当用户在搜索框中输入关键词时，页面可以根据输入的内容实时展示搜索结果。又或者在密码输入框中，可以使用 input 事件监听输入内容的合法性，比如实时检测密码强度等。

(2)`change` 事件：当元素的值发生改变时触发的事件。

含义：change 事件是在元素的值经过用户交互或脚本操作而发生改变时触发的。通常，在用户停止更改元素值时(比如鼠标点击其他地方或按下回车键)才会触发该事件。
使用场景：change 事件适用于需要监听元素值变化并进行相应处理的场景。例如，当用户选择下拉选项、勾选复选框或单选按钮时，可以通过 change 事件来捕捉并触发相应的逻辑，比如更新页面内容、提交表单等。

(3)`blur` 事件：当输入框失去焦点时触发的事件。

含义：blur 事件是在输入框(或其他可获取焦点的元素)被用户操作后且失去焦点时触发的。焦点失去可以由用户点击其他区域、按下 Tab 键或在移动设备上点击其他部分等方式来实现。
使用场景：blur 事件常用于验证用户输入或进行输入数据的收集和处理。例如，在一个表单中，当用户填写完一个输入框后离开焦点时，可以使用 blur 事件对输入内容进行验证，并给出相应的提示或错误信息。另外，在一些网页应用中，当用户在输入框中输入特定内容后离开焦点时，可以触发自动保存操作。

(4)总结：

通过 input、change 和 blur 这三个事件，我们可以根据用户的输入状态和元素值的变化情况来实现实时检验、实时反馈和处理用户输入内容等操作。
这些事件可以提供更好的用户体验和交互效果。

【2】过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤案例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <p><input type="text" v-model="myText" @input="handleInput" placeholder="请输入要筛选的内容："></p>
<!-- <p><input type="text" v-model="myText" @change="handleInput" placeholder="请输入要筛选的内容："></p> -->
<!-- <p><input type="text" v-model="myText" @blur="handleInput" placeholder="请输入要筛选的内容："></p> -->
    <ul>
        <li v-for="data in newList">{{data}}</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myText: '',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
            newList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
        },
        methods: {
            handleInput() {
                this.newList = this.dataList.filter(item => {
                    // item.indexOf(this.myText)：输入框中输入的字符串在筛选元素中的索引
                    return item.indexOf(this.myText) > -1   // 返回索引大于1的元素：>-1 就表示包含在其中
                })
            },
        },
    })
</script>
</html>

【3】事件修饰符

事件修饰符	释义
.stop	只处理自己的事件，父控件冒泡的事件不处理(阻止事件冒泡)
.self	只处理自己的事件，子控件冒泡的事件不处理
.prevent	阻止a链接的跳转
.once	事件只会触发一次(适用于抽奖页面)

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生

用 v-on:click.prevent.self 会阻止所有的点击
而 v-on:click.self.prevent 只会阻止对元素自身的点击

(1)`.stop`: 只处理自己的事件，父控件冒泡的事件不处理(阻止事件冒泡)。

含义：.stop 修饰符用于阻止事件冒泡，即在事件触发后，阻止其向上级元素传递和触发相同类型的事件。
使用场景：当一个父元素包含多个子元素，并且这些子元素都有一个相同类型的事件监听器时，可以使用 .stop 修饰符来限制只触发当前元素的事件，而不会触发父级元素的同类型事件。这样可以避免多次触发相同事件导致的重复操作或冲突。

(2)`.self`: 只处理自己的事件，子控件冒泡的事件不处理。

含义：.self 修饰符用于指定仅处理当前元素的事件，不处理其子元素冒泡上来的相同类型事件。
使用场景：当一个元素内包含其他子元素，并且子元素也具有相同类型的事件监听器时，可以使用 .self 修饰符来仅触发当前元素的事件，而不受其子元素冒泡带来的影响。这样可以避免在处理当前元素事件时，无意中触发了其他子元素的事件。

(3)`.prevent`: 阻止 `<a>` 链接的跳转。

含义：.prevent 修饰符用于防止 <a> 标签的默认行为，即阻止点击链接时浏览器进行页面跳转。
使用场景：当需要在点击链接时不进行页面跳转，而是执行自定义的逻辑或操作时，可以使用 .prevent 修饰符。例如，在提交表单前需要进行一些验证或数据处理的情况下，可以用 .prevent 来防止提交按钮直接跳转页面，而是先执行验证和处理逻辑。

(4)`.once`: 事件只会触发一次(适用于抽奖页面)。

含义：.once 修饰符用于指定事件只会触发一次，之后再次触发相同类型的事件将不再生效。
使用场景：当需要某个事件只触发一次时，比如在抽奖页面中点击“开始抽奖”按钮后，只希望触发一次相关的处理函数，之后按钮点击将不再有响应，可以使用 .once 修饰符。

(5)总结：

通过使用 .stop、.self、.prevent 和 .once 这些事件修饰符，我们可以对事件的传播和触发进行更加精确和灵活的控制。
这些修饰符可以解决一些常见的交互问题，提升用户体验并简化开发过程。

(6)案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<!--    <ul @click="handleUl">-->
    <ul @click.self="handleUl">
<!--        <li v-for="data in dataList" @click="handleLi">{{data}}</li>-->
        <li v-for="data in dataList" @click.stop="handleLi">{{data}}</li>
        <li><a href="http://www.baidu.com">不拦截</a></li>
        <li><a href="http://www.baidu.com" @click="handleLink($event)">点击拦截</a></li>
        <li><a href="https://www.baidu.com" @click.prevent="handleLink">点击拦截</a></li>
        <li><button @click.once="test">只执行一次</button></li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            dataList: ['1','22','333','4444']
        },
        methods: {
            handleUl(ev){
                console.log('ul被点击了')
            },
            handleLi(){
                console.log('li被点击了')
                ev.stopPropagation()    // 点击事件停止 冒泡(向父组件传递时间)
            },
            handleLink(ev){
                ev.preventDefault()
            },
            test(){
                alert('只触发1次')
            }
        }
    })
</script>
</html>

事件冒泡

阻止事件冒泡

【3】按键修饰符

按键修饰符是用于处理键盘事件的修饰符。通过按键修饰符，可以提供更灵活的键盘操作控制。

(1)`.ctrl`：需要同时按下 Ctrl 键。

例如：@keydown.ctrl 会在按下某个键的同时按下 Ctrl 键时触发。

(2)`.alt`：需要同时按下 Alt 键。

例如：@keydown.alt 会在按下某个键的同时按下 Alt 键时触发。

(3)`.shift`：需要同时按下 Shift 键。

例如：@keydown.shift 会在按下某个键的同时按下 Shift 键时触发。

(4)`.meta`：需要同时按下特定的 Meta 键(如 Command 键、Windows 键等)。

例如：@keydown.meta 会在按下某个键的同时按下 Meta 键时触发。

(5)`.exact`：需要精确匹配按键组合，除了指定的按键，其他同时按下的按键无效。

例如：@keydown.ctrl.exact 会在只按下 Ctrl 键时触发，而不会在同时按下其他键时触发。

(6)`.keyCode`：指定特定的键码，只有按下对应的键码时才会触发事件。

例如：@keydown.13 会在按下 Enter 键时触发，其中 13 是 Enter 键的键码。()

(7)小结

这些按键修饰符可以和其他事件修饰符结合使用，以实现更精确的键盘操作。
例如，@keydown.ctrl.enter 可以用来检测同时按下 Ctrl 键和 Enter 键的组合操作。
使用按键修饰符能够增强用户与应用程序之间的交互体验，并提供更多的功能和快捷操作。

(8)案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按键修饰符</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <!--    <input type="text" v-model="myInput" @keyup="handleKey">-->
    <!--    <input type="text" v-model="myInput" @keyup.13="handleKey">-->
    <input type="text" @keyup="handleKey1">
    <input type="text" @keyup.enter="handleKey2">
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            dataList: ['1', '22', '333', '4444']
        },
        methods: {
            handleKey1(ev) {
                console.log('按下了' + ev)
                // if (ev.keyCode==13){
                //     console.log('回车键被按下了')
                // }
            },
            handleKey2(ev) {
                console.log('按下了回车键')
            }
        }
    })
</script>
</html>

【四】数据双向绑定

【1】详解

在Vue中，数据双向绑定是一个核心特性，它允许将数据模型与视图之间建立起实时的同步关系。
- 通过数据双向绑定，当数据模型发生变化时，视图会自动更新；
- 反之，当视图中的数据发生变化时，数据模型也会随之更新。
Vue实现数据双向绑定的方式主要是使用了指令 v-model。
- v-model 指令可以用在表单元素(如 <input>、<textarea>、<select>)上，它会自动给表单元素绑定一个值和一个事件，从而实现数据的双向绑定。

【2】使用方法如下：

在 Vue 的模板中，使用 v-model 指令将表单元素与数据模型进行绑定，例如：
```
<input v-model="message">
```
在 Vue 的实例中，通过定义 data 选项来声明数据模型，例如：
```
new Vue({
  data: {
    message: 'Hello Vue!'
  }
})
```
上述代码会将输入框的值与 message 数据属性进行双向绑定。
- 当用户在输入框中输入内容时，message 的值会自动更新；
- 当 message 的值改变时，输入框的内容也会随之更新。

需要注意的是，数据绑定只能实现在Vue实例内部的数据的双向绑定，
如果需要将数据同步到其他组件或与后端进行通信，则还需使用其他方式，如事件或自定义的方法来实现。

【3】总结

Vue中的数据双向绑定是通过 v-model 指令来实现的，它能够方便地保持数据模型与视图之间的同步更新，提供更加便捷和高效的开发方式。

【4】案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <input type="text" v-model="myText" placeholder="请输入内容">
    您输入的内容是：{{myText}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myText: '',
        },
    })
</script>
</html>

【五】表单控制

【1】checkbox选中

(1)思路解析

在Vue中，使用 v-model 指令可以将checkbox绑定到数据模型上。
例如，如果有一个名为 isChecked 的数据属性，可以这样实现checkbox的选中功能：

html<input type="checkbox" v-model="isChecked">

在上述示例中，当checkbox被选中时，isChecked 数据属性会变为 true，反之则为 false。

(2)案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <input type="text" placeholder="请输入用户名："><br>
    <input type="password" placeholder="请输入密码："><br>
    <input type="checkbox" v-model="radio">记住用户名
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myText: '',
            textBig: '',
            radio: false,
        },
    })
</script>
</html>

【2】单选

(1)思路解析

对于单选框，我们可以将每个选项与一个数据属性绑定，并且使用相同的 v-model 指令来控制单选框的选择状态。
假设有以下单选框选项：

html<input type="radio" value="option1" v-model="selectedOption">
<input type="radio" value="option2" v-model="selectedOption">
<input type="radio" value="option3" v-model="selectedOption">

可以看到，上述代码中的 v-model 都绑定到了名为 selectedOption 的数据属性上。
当用户选择某个选项时，selectedOption 的值会被更新为该选项的值。

(2)案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <input type="radio" v-model="radio" value="男">男
    <input type="radio" v-model="radio" value="女">女
    <input type="radio" v-model="radio" value="保密">保密
    <br><br>您选择的性别：{{radio}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            radio: '',
        },

    })
</script>
</html>

【3】多选

(1)思路解析

多选框的处理方式与单选框类似，可以使用 v-model 将多选框绑定到一个数据属性上，并将多个选中的值存储在数组中。例如：

html<input type="checkbox" value="option1" v-model="selectedOptions">
<input type="checkbox" value="option2" v-model="selectedOptions">
<input type="checkbox" value="option3" v-model="selectedOptions">

在上述示例中，selectedOptions 是一个数组，当用户选择某个多选框时，该选项的值会添加到 selectedOptions 数组中。

(2)案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">

    <input type="checkbox" v-model="many" value="篮球">篮球
    <input type="checkbox" v-model="many" value="足球">足球
    <input type="checkbox" v-model="many" value="棒球">棒球
    <input type="checkbox" v-model="many" value="桌球">桌球
    <br><br>您喜欢的球类：{{many}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            many: [],
        },
    })
</script>
</html>

【4】购物车案例 - 结算

(1)思路解析

在购物车案例中，可以使用计算属性来计算选中商品的总价。

首先，在商品对象中添加一个表示是否被选中的属性：

javascriptdata() {
  return {
    cartItems: [
      { id: 1, name: '商品1', price: 10, selected: false },
      { id: 2, name: '商品2', price: 20, selected: false },
      // ...
    ]
  };
}

然后，在计算属性中计算总价：

javascriptcomputed: {
  totalPrice() {
    return this.cartItems.reduce((total, item) => {
      if (item.selected) {
        total += item.price;
      }
      return total;
    }, 0);
  }
}

在上述示例中，totalPrice 是一个计算属性，它通过遍历 cartItems 数组来计算选中商品的总价。

(2)案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车结算</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        table, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="box">
    <table>
        <tr>
            <td>商品名称</td>
            <td>价格</td>
            <td>数量</td>
            <td>选择</td>
        </tr>
        <tr v-for="item in dataList">
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.number}}</td>
            <td><input type="checkbox" :value="item" v-model="checkGroup"></td>
        </tr>
    </table>
    <br>已选商品：{{checkGroup}}
    <br>总价：{{getPrice()}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            dataList: [
                {name: '今瓶没', price: 99, number: 2},
                {name: '西柚记', price: 59, number: 1},
                {name: '水壶转', price: 89, number: 5},
            ],
            checkGroup: [],
        },
        methods: {
            getPrice() {
                let sum_price = 0
                for (i in this.checkGroup) {    // 这里的 i 是索引
                    sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
                }
                return sum_price
            }
        }
    })
</script>
</html>

【5】购物车案例 - 全选/全不选

(1)思路解析

在购物车示例中，可以添加一个全选复选框，用于同步控制所有商品的选中状态。在Vue中，可以使用一个额外的数据属性来表示全选的状态，并使用 v-model 将其绑定到全选复选框上：
```
<input type="checkbox" v-model="selectAll">
```

然后，在点击全选复选框时，通过监听事件来更新每个商品对象的选中状态：

methods: {
  toggleSelectAll() {
    this.cartItems.forEach(item => {
      item.selected = this.selectAll;
    });
  }
}

在上述示例中，toggleSelectAll 是一个方法，用于切换全选的状态，并将该状态同步到每个商品对象的选中属性上。

(2)案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选/全不选</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        table, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="box">
    <table>
        <tr>
            <td>商品名称</td>
            <td>价格</td>
            <td>数量</td>
            <td>全选/全不选<input type="checkbox" v-model="allChecked" @change="checkAll"></td>
        </tr>
        <tr v-for="item in dataList">
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.number}}</td>
            <td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td>
        </tr>
    </table>
    <br>已选商品：{{checkGroup}}
    <br>总价：{{getPrice()}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            dataList: [
                {name: '今瓶没', price: 99, number: 2},
                {name: '西柚记', price: 59, number: 1},
                {name: '水壶转', price: 89, number: 5},
            ],
            checkGroup: [],
            allChecked: false,
        },
        methods: {
            getPrice() {
                let sum_price = 0
                for (i in this.checkGroup) {    // 这里的 i 是索引
                    sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
                }
                return sum_price
            },
            checkAll() {
                if (this.checkGroup.length > 0) {
                    this.checkGroup = []
                } else {
                    this.checkGroup = this.dataList
                }
            },
            checkOne() {
                // if (this.checkGroup.length === this.dataList.length) {
                //     this.allChecked = true
                // } else {
                //     this.allChecked = false
                // }
                this.allChecked = this.checkGroup.length === this.dataList.length;
            }
        }
    })
</script>
</html>

【6】购物车案例 - 数量加减

(1)思路解析

在购物车中，可以为每个商品添加数量加减的功能。
首先，在商品对象中添加表示数量的属性：

data() {
  return {
    cartItems: [
      { id: 1, name: '商品1', price: 10, quantity: 1 },
      { id: 2, name: '商品2', price: 20, quantity: 1 },
      // ...
    ]
  };
}

然后，在模板中为每个商品的数量添加加减按钮，并使用相应的事件方法来处理数量的变化：

<div v-for="item in cartItems" :key="item.id">
  <button @click="decreaseQuantity(item)">-</button>
  <span>{{ item.quantity }}</span>
  <button @click="increaseQuantity(item)">+</button>
</div>

最后，在事件方法中更新数量值：

methods: {
  increaseQuantity(item) {
    item.quantity++;
  },
  decreaseQuantity(item) {
    if (item.quantity > 1) {
      item.quantity--;
    }
  }
}

在上述示例中，increaseQuantity 和 decreaseQuantity 是两个方法，分别用于增加和减少商品的数量。

(2)案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制加减</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
    <div id="box" class="col-md-4 offset-md-1 text-center mt-5 ">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th scope="col">商品名称</th>
                <th scope="col">单价</th>
                <th scope="col">数量</th>
                <th scope="col">全选/全不选 <input type="checkbox" v-model="allChecked" @change="checkAll"></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in dataList">
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button class="btn link btn-sm" @click="reduceNum(item)">-</button>
                    {{item.number}}
                    <button class="btn link btn-sm" @click="item.number++">+</button>
                </td>
                <td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td>
            </tr>
            <tr class="text-left">
                <td colspan="4">总价：{{getPrice()}}
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            dataList: [
                {name: '今瓶没', price: 99, number: 1},
                {name: '西柚记', price: 59, number: 1},
                {name: '水壶转', price: 89, number: 1},
            ],
            checkGroup: [],
            allChecked: false,
        },
        methods: {
            getPrice() {
                let sum_price = 0
                for (i in this.checkGroup) {
                    sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
                }
                return sum_price
            },
            checkAll() {
                if (this.checkGroup.length > 0) {
                    this.checkGroup = []
                } else {
                    this.checkGroup = this.dataList
                }
            },
            checkOne() {
                // if (this.checkGroup.length === this.dataList.length) {
                //     this.allChecked = true
                // } else {
                //     this.allChecked = false
                // }
                this.allChecked = this.checkGroup.length === this.dataList.length;
            },
            reduceNum(item) {
                if (item.number === 1) {
                    item.number = 1
                } else {
                    item.number--
                }
            }
        }
    })
</script>
</html>

【六】v-model进阶

【1】v-model 之 lazy、number、trim

lazy：等待input框的数据绑定时区焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格

(1)debounce

作用：延迟数据更新，直到一段时间内没有输入操作才进行绑定。
使用场景：适用于需要减少频繁触发的输入操作，例如搜索框的实时联想功能。

例子：

<input v-model.debounce="searchText" />

data() {
  return {
    searchText: ""
  };
}

(2)lazy

作用：延迟数据绑定更新，直到发生指定的事件时才进行绑定。
使用场景：适用于需要在特定操作后才进行数据更新的情况，例如在按钮点击后或回车键按下后更新数据。

例子：

<input v-model.lazy="message" />
<button @click="updateMessage">Update</button>

data() {
  return {
    message: ""
  };
},
methods: {
  updateMessage() {
    // 在按钮点击后或回车键按下后才更新数据
    this.$nextTick(() => {
      // 执行数据更新操作
    });
  }
}

(3)number

作用：将绑定的值强制转换成数字类型。
使用场景：适用于需要确保绑定的值为数字类型的输入框，例如金额输入框。

例子：

<input v-model.number="quantity" type="number" />

data() {
  return {
    quantity: 0
  };
}

(4)trim

作用：去除输入框绑定的值的首尾空格。
使用场景：适用于需要去除用户输入值的首尾空格的情况，例如用户名、密码输入框。

例子：

<input v-model.trim="username" />

data() {
  return {
    username: ""
  };
}

【2】案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model 之 lazy、number、trim</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <input type="text" v-model="myText1" placeholder="normal"> {{myText1}}
    <br>
    <input type="text" v-model.lazy="myText2" placeholder="lazy"> {{myText2}}
    <br>
    <input type="text" v-model.number="myText3" placeholder="number"> {{myText3}}
    <br>
    <input type="text" v-model.trim="myText4" placeholder="trim"> {{myText4}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myText1: '',
            myText2: '',
            myText3: '',
            myText4: '',
        },
    })
</script>
</html>

Chimengmeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【二】Vue之基础

【一】条件渲染指令释义v-if相当于： ifv-else相当于：elsev-else-if相当于：else if在Vue中，条件渲染是一种根据特定条件决定是否显示或隐藏元素的方式。Vue提供了v-if、v-else和v-else-if指令来实现条件渲染。【1】v-if指令：v-if指令用于根据表达式的真假值来决定是否渲染元素。如果表...
复制链接

扫一扫