• vue.js：哪些数组的方法是响应式的案例

    哪些数组的方法是响应式的案例

    1.push()方法 一次可以添加多个元素的

    this.letters.push('aaa');

    • 1

    2.pop() 从最后一个开始删除元素的

    this.letters.pop();

    • 1

    3.shift() 从第一个开始删除元素

    this.letters.shift();

    • 1

    4.unshift() 在最前面添加元素 一次可以添加多个元素的

    this.letters.unshift('aaa');

    • 1

    5.splice()作用：删除元素/插入元素/替换元素

    • 删除元素：第二个参数传入你要删除的几个元素(如果没有传，就删除后面所有的元素)
    • 替换元素：第二个参数表示我们要替换的元素，后面是用于替换前面的元素
    • 插入元素：第二个参数传入0，并且后面跟上需要插入的元素就可以
    • splice(start);
    this.letters.splice(1,3,'m','n','p');
this.letters.splice(1,0,'m','n','q');

    • 1
    • 2

    6.sort()

    this.letters.sort();

    • 1

    7.reverse()

    this.letters[0] = 'bbbbb';

    • 1

    8.通过索引值修改数组中的元素(注意：此方法不是响应式的，界面不会改变的，不会被监听到)

    this.letters[0] = 'bbb';

    • 1

    解决办法
    <1>可以利用替换进行修改元素

    this.letters.splice(0,1,'bbb');

    • 1

    <2>Vue内部的方法也可以修改

    Vue.set(this.letters,0,'bbbbb');

    • 1

    笔记完整代码

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>哪些数组的方法是响应式的案例title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<ul>
				<li v-for = "item in letters" :key = "item">{{item}}li>
			ul>
			<button @click = "btnClick">按钮button>
		div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					letters:['a','b','c','d']
				},
				methods:{
					btnClick() {
						// 1.push()方法 一次可以添加多个元素的
						this.letters.push('aaa');
						
						//2.pop() 从最后一个开始删除元素的
						this.letters.pop();
						
						//3.shift() 从第一个开始删除元素
						this.letters.shift();
						
						//4.unshift() 在最前面添加元素 一次可以添加多个元素的
						this.letters.unshift('aaa');
						
						//5.splice()作用：删除元素/插入元素/替换元素
						//删除元素：第二个参数传入你要删除的几个元素(如果没有传，就删除后面所有的元素)
						//替换元素：第二个参数表示我们要替换的元素，后面是用于替换前面的元素
						//插入元素：第二个参数传入0，并且后面跟上需要插入的元素就可以
						//splice(start);
						this.letters.splice(1,3,'m','n','p');
						this.letters.splice(1,0,'m','n','q');
						
						//6.sort()
						this.letters.sort();
						
						//7.reverse()
						this.letters[0] = 'bbbbb';
						
						//8.通过索引值修改数组中的元素(注意：此方法不是响应式的，界面不会改变的，不会被监听到)
						// this.letters[0] = 'bbb';
						this.letters.splice(0,1,'bbb');//可以利用替换进行修改元素
						Vue.set(this.letters,0,'bbbbb');//Vue内部的方法也可以修改
					}
				}
			});
			function sum(...sum){
				// 可变参数
				console.log(sum);
			}
			sum(num1,num2,num3....);
		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
  • 相关阅读:
    【owt】构建m79的owt-client-native：使用vs2017
    consul系列文章02---替换掉.netcore的配置文件
    Arm Cortex R52与TC3xx Aurix上下文切换对比
    钉钉与实在智能达成战略合作，实在Agent助力钉钉AI助理成为“新质生产力”
    golang从0到1实战系统四十：处理表单的输入
    L1 频段卫星导航射频前端低噪声放大器芯片MS2659
    Yolov5 中添加Network Slimming剪枝--稀疏训练部分
    CNCC 2023 | 大模型全面革新推荐系统！产学界多位大咖精彩献言
    torch.nn基础学习教程 | PyTorch nn Basic Tutorial
    OceanBase 来参加外滩大会了(内附干货PPT)
  • 原文地址：https://blog.csdn.net/weixin_55804957/article/details/128213762