Vue.set 全局操作

最新推荐文章于 2023-04-04 17:26:16 发布

机灵的小飞机

最新推荐文章于 2023-04-04 17:26:16 发布

阅读量294

点赞数

本文链接：https://blog.csdn.net/weixin_42354407/article/details/104441447

版权

1.Vue.set 能做什么？

Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。

实例：
vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。

在外部改变数据的三种方法：

html代码：

<div id="app">
	<p>{{count}}</p>
</div>
<input type="button" value="增加" onclick='add()'>

js 代码：

    <script>
    var outData = {
		count : 1 , 
}  
	const app = new Vue({
			el:'#app' , 
			data : outData 
})
    </script>

我们在 JS 代码中写了一个 outData 对象这个数据，然后传递给构造器。
看 html 代码，这个按钮的点击事件是在外部的。
我们在外部定义一个方法，从外部调用 Vue 构造器内部的数据。

方法一： Vue.set(对象名，‘数据名’ ， ‘数’)

	function add(){
		Vue.set(outCount , 'count' ,50) ; 
}

方法二：用Vue 对象的方式添加

app.count++ ;

方法三：直接操作外部数据

outCount.count++ ;

注意：我们可以使用以上方法来操作我们的外部数据

2.为什么有 Vue.set 存在？

由于Javascript的限制，Vue不能自动检测以下变动的数组。

当你利用索引直接设置一个项时，vue不会为我们自动更新。
当你修改数组的长度时，vue不会为我们自动更新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Vue.set 全局操作</title>
</head>
<body>
    <h1>Vue.set 全局操作</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for=" aa in arr">{{aa}}</li>
        </ul>

    </div>
    <button onclick="add()">外部添加</button>

    <script type="text/javascript">

        function add(){
            console.log("我已经执行了");
           	app.arr[1]='ddd'; //通过 Vue 对象的方式修改数组中的值
           //Vue.set(app.arr,1,'ddd');
        }
        var outData={
            arr:['aaa','bbb','ccc']
        };
        var app=new Vue({
            el:'#app',
            data:outData
        })
    </script>
</body>
</html>

如何理解：
我们在外部数据中添加了一个数组。然后我们通过 Vue 对象或者Vue.set 提供的方法来修改数组中的值。当DOM没有发生变化时，我们数组的值并不会发生变化。这时候我们就需要用Vue.set 来刷新数组的变化。

机灵的小飞机

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.set 全局操作

1.Vue.set 能做什么？Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。实例：vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。在外部改变数据的三种方法：html代码：<div id="app"> <p>{{count}}</p>&lt...
复制链接

扫一扫