Vue改变（或增加）数组或对象中的数据---set()

逃离我推掉我的手 2022-03-25 03:20 275阅读 0赞

在之前说过 改变对象的数据只能改变他的引用，其实还有一个set()的方法可以操作：

这是3.8的代码

<!DOCTYPE html>
    <html>
    <head>
    	<title>列表渲染</title>
    	<script src="vue.js"></script>
    </head>
    <body>
    	<div id="app">
    		<div v-for="(item, key, index) of Objects" :key="index">
    			{
       {item}}-----{
       {key}}-----{
       {index}}
    		</div>
    	</div>
    </body>
    <script>
    	var vm = new Vue({
    		el:"#app",
    		data: {
    			Objects: {
    				name: 'abc',
    				age: 22,
    				city: 'xiamen'
    			}
    		}
    	})
    </script>
    </html>

改变示例：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70][]

改变数组的数据，之前是说只能用pop push shift unshift splice sort reverse方法或者改变引用。其实数组也能用set()方法：

<!DOCTYPE html>
    <html>
    <head>
    	<title>列表渲染</title>
    	<script src="vue.js"></script>
    </head>
    <body>
    	<div id="app">
    		<div v-for="(item, index) of Objects">
    			{
       {item}}
    		</div>
    	</div>
    </body>
    <script>
    	var vm = new Vue({
    		el:"#app",
    		data: {
    			Objects: [1, 2, 3, 4]
    		}
    	})
    </script>
    </html>

示例：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70]: /images/20220325/285b4cc13bb84facbcd44c04a49eb06f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 1]: /images/20220325/585df1e8e6db40eaac4b4ff4f6e8d613.png