Vue.set 简单实例

最新推荐文章于 2022-05-31 16:14:14 发布

352328759

最新推荐文章于 2022-05-31 16:14:14 发布

阅读量1.2k

点赞数 1

分类专栏： Vue 实际应用文章标签： vue.set 不更新数组

本文链接：https://blog.csdn.net/u013970232/article/details/111151662

版权

实际应用同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

Vue

26 篇文章 1 订阅

订阅专栏

vue 的一大特性就是修改数据后, 系统能自动更新到界面上
但这一特性并不是所有情况下都能实现, 就比如在数组中

在数组中, 用数组的下标直接修改数组的值, 系统并不会把这次修改更新到界面上

[直接修改 arr[0], 界面上不能自动更新]

而是把这次修改, 拖延到下一次同组件的界面更新时, 才更新

[直接修改 arr[0], 界面上不能自动更新] -> [修改一个无关值 boo]

也就是说, 子组件的更新还不足以触发数组的数据更新

[直接修改 arr[0], 界面上不能自动更新] -> [子组件修改一个无关值 boo]

而利用 Vue.set 就能立马弥补这个缺陷

[set修改 arr[1], 界面上可以自动更新]

demo 如下

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Vue.set 实例</title>
	</head>

	<body>
		<div id="swq">
			<div>arr: {{arr}}</div>
			<div>boo: {{boo}}</div>
			<button @click="click">直接修改 arr[0], 界面上不能自动更新</button>
			<button @click="click2">set修改 arr[1], 界面上可以自动更新</button>
			<button @click="click3">修改一个无关值 boo</button>
			<hr />
			<components1></components1>
		</div>

		<script type="text/x-template" id="components1-template">
			<div>
				子组件
				<div>boo: {{boo}}</div>
				<button @click="click4">子组件修改一个无关值 boo</button>
			</div>
		</script>

		<script src="./jvw/vue/vue.2.5.16.js"></script>
		<script type="text/javascript">
			var components1 = {
				template: "#components1-template",
				data: function() {
					return {
						boo: true,
					}
				},
				methods: {
					click4() {
						this.boo = !this.boo
					},
				},
			};
			var vu = new Vue({
				el: "#swq",
				data: {
					arr: [1, 2],
					boo: true,
				},
				components: {
					components1
				},
				methods: {
					click() {
						this.arr[0]++;
						console.log(this.arr)
					},
					click2() {
						this.$set(this.arr, 1, this.arr[1] + 1);
						console.log(this.arr)
					},
					click3() {
						this.boo = !this.boo
					},
				},
			})
		</script>
	</body>

</html>

附一个 Vue.set 的实际应用案例(Vue 多任务进度平均值计算器)

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>Vue 多任务进度平均值计算器</title>
	<style type="text/css">
		* { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; }
		#swq ul li { height: 30px; line-height: 30px; cursor: pointer; }
		.tip { font-size: 12px; color: gray; }
	</style>
</head>

<body>
	<div id="swq">
		<input type="number" name="add" id="add" v-model="addnum" placeholder="初始进度" />
		<button type="button" @click="add">添加任务</button>
		<template v-if="lin.length > 0">
			<ul>
				<li v-for="(item , key) in lin" @click="increment(key)" v-bind:style="{backgroundColor: 'rgba(0,255,0,' + item / 100 + ')' , width: item + '%' }"> {{ item }}% </li>
			</ul>
			<p>总数: {{ sum }}</p>
			<p>平均值: {{ sum / lin.length }}%</p>
		</template>
		<div class="tip">填写初始进度, 点击添加任务</div>
		<div class="tip">点击任务进度值, 任务进度加1</div>
		<div class="tip">任务进度满 100% 后继续点击, 即可删除该任务</div>
	</div>
	<script src="http://cdn.bootcss.com/vue/2.2.1/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#swq',
			data: {
				addnum: "",
				lin: [90, 0]
			},
			methods: {
				increment: function (a) {
					if (this.lin[a] >= 100) {
						this.lin.splice(a, 1);
					} else if (this.lin[a] < 100) {
						this.$set(this.lin, a, this.lin[a] + 1);
					};
				},
				add() {
					this.lin.push(~~this.addnum);
					this.addnum = "";
				}
			},
			computed: {
				sum: function () {
					return this.lin.reduce(function (x, y) {
						return x + y;
					});
				},
			}
		});
	</script>
</body>

</html>

//end

352328759

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue.set 简单实例

vue 的一大特性就是修改数据后, 系统能自动更新到界面上但这一特性并不是所有情况下都能实现, 就比如在数组中在数组中, 用数组的下标直接修改数组的值, 系统并不会把这次修改更新到界面上[直接修改 arr[0], 界面上不能自动更新]而是把这次修改, 拖延到下一次同组件的界面更新时, 才更新[直接修改 arr[0], 界面上不能自动更新] -> [修改一个无关值 boo]也就是说, 子组件的更新还不足以触发数组的数据更新[直接修改 arr[0], 界面上不能自动更新] -&gt
复制链接

扫一扫