Vue的set方法

最新推荐文章于 2024-07-04 09:46:22 发布
最新推荐文章于 2024-07-04 09:46:22 发布
阅读量163 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55041880/article/details/118295303
版权

指向型数据类型 数组和对象 可以使用全局方法：vue.set(对象，key,value)来修改 防止数据修改不会渲染视图 用实例方法vm. s e t 或 t h i s . set或this. set或this.set也可以得到相同效果

点击按钮 添加新的属性

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="app">
        <ul>
            <li v-for="(item,index) in arr" :key="index">{{item}}</li>
            <li v-for="(item,keyI,index) in obj" >
               {{keyI}} : {{item}}
            </li>
        </ul>
        <button @click="addArr">添加(数组)</button></button>
        <button @click="addObj">添加(对象)</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        var vm = new Vue({
            el : ".app",
            data : {
                arr : ["a","b","c"],
                obj : {
                    "name" : "小明",
                    "age" : 13,
                    "class" : 2
                }
            },
            methods: {
                addArr (){
                    // this.arr.push("d");
                    this.$set(this.arr,4,"d")
                },
                addObj (){
                    // this.$set(this.obj,"sex","m");
                    // Vue.set(this.obj,"sex","m")
                    vm.$set(this.obj,"sex","m");
                }
            }
          
        });
    </script>
</body>
</html>
小可同学啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue执行方法,方法获取data值,设置data值,方法传值操作
10-14
首先，Vue中的方法通常定义在`methods`对象中，例如`run()`、`getMsg()`和`setMsg()`等。这些方法可以在模板中通过`v-on`或`@`指令调用，如`@click`，当用户点击按钮时执行相应的方法。例如，`@click="run()"`将在...
vue计算属性get和set用法示例
10-17
在Vue实例中定义计算属性时，我们通常使用对象形式，其中包含`get`和`set`函数： ```javascript computed: { b: { // getter函数定义了当读取b时的返回值 get: function() { return this.a + 10; }, // 如果...
Vue中的set方法
mkbird的博客
05-18 1万+
Vue的set方法 通过set方法添加对象属性 var vm = new Vue({ el:"#app", data:{ userInfo:{ name:"Dell", age:28, gender:"male", salary:"secret" } } }) Vue.set(vm.userInfo,"address","beijing") // 或者通过Vue实例 vm.$set(vm.userInfo,"address","beijing") 数组中的使用 va
vue——set方法
weixin_54362381的博客
08-22 7860
Vue中的set方法 【set方法既是一个Vue的全局方法，它也是一个实例方法。】 1、对象使用： （1）全局方法：Vue.set(vm.userInfo,“address”,“beijing”)（对象名，键名，键值） （2）实例方法：vm.$set(vm.userInfo,“address”,“beijing”) 2、数组使用： （1）全局方法：Vue.set(vm.userInfo,2,10)（数组名，下标，新的数据） （2）实例方法：vm.$set(vm.userInfo,3,8) <div i
Vue.set 方法原理详解
最新发布
My_wife_QBL的博客
07-04 1555
Vue.set方法用于向响应式对象中添加新的属性，并确保这个新属性是响应式的。target：目标对象或数组。：属性名或数组索引。value：要设置的值。Vue.set方法是Vue响应式系统中的一个重要组成部分，它解决了向响应式对象和数组中添加新属性时的响应式问题。通过深入理解Vue.set方法的原理，开发者可以更好地利用这一特性，构建出更加高效和灵活的Vue应用。希望本文能够帮助你全面理解Vue.set方法的原理，并在实际开发中发挥其最大的价值。
Vue.set()
张木期的博客
10-14 2778
当我们使用vue开发时经常会遇到当vue实例已经创建好了，有时候需要再次给数据赋值时，并不能在视图中改变 在vue文档中注意事项写着如果在实例创建之后添加新的属性到实例上，它不会触发视图更新 因此比如我们修改一个数组其中的一个值，或者添加一条数据时，不管用。 <div id="app"> <p v-for="item in items" v-once>{{item}}</p> <button @click="btn()">添加</button>
Vue中的set()方法
New个对象喝咖啡
03-30 1604
大家在写vue前后端交互时不知道有没有碰到过一个问题，就是在data里面定义一个变量，然后从后台获取数据后赋值给这个变量，但是对这个变量里的对象的属性或者数组的元素进行修改时，发现数据能修改，但视图不更新！ 原因：vue管理的变量必须生成了get和set方法，如data中定义的变量，虽然直接通过赋值的对象有get、set方法，但是对象里面的属性或者元素并没有get和set方法，所以vue不会根据他的属性改变去更新视图 例子如下： 循环遍历变量对象中的数组 定义一个没有内容的变量 页面初始化时，构造一个数
Vue.set()方法
qq_37389526的博客
08-18 578
Vue.set()方法的三个参数： target：要更改的数据源 key：要更改的具体数据 value：重新赋的值 例如： <body> <h1>Vue.set 全局操作</h1> <div id="app"> <ul> <li v-for=" item in arr">{{item}}</li> ...
vue中get请求如何传递数组参数的方法示例
10-16
本篇将详细介绍如何在Vue中配置axios，使其能够正确地将数组作为GET请求的参数传递给后端。 首先，问题在于当我们尝试像这样传递一个包含数组的参数： ```javascript let params = { statusList: ['OVERDUE', '...
使用Vue.set()方法实现响应式修改数组数据步骤
10-16
为了解决这个问题，Vue提供了一个`Vue.set()`方法，专门用于确保数组或对象的响应式更新。 `Vue.set()`方法的使用方式如下： ```javascript Vue.set(object, index, value); ``` - `object`: 需要修改的数据源，...
vue数据双向绑定原理解析（get & set)
11-29
Vue的数据绑定不仅限于简单类型的属性，对于数组和对象这样的复杂类型，Vue还提供了一些特殊的API，如`$set()`、`$delete()`，以及`array`变异方法（如`push()`、`pop()`等），以确保在数组和对象上的操作也能触发...
Vue的列表,set方法
weixin_44346827的博客
05-15 854
//template,做内容的时候，不需要渲染的，不要最外层的div的时候； //不能通过myList[5]={‘id’:88,‘name’:‘章’},不能通过下标添加的方式； //vue给我们提供了三个函数方法； //1.spice(1,1,{‘id’:55,‘name’:‘zz’}) //2.数组的引用 myList=[{’'d’d}]; //pop,最后一个删除掉；shift:第一项删除掉，...
理解 Vue.set 方法：原理、流程和代码演示
大剑师兰特的GIS世界
02-26 2502
Vue.set 方法的主要作用是向响应式对象中添加一个新属性，并确保新属性同样是响应式的。这个方法的实现原理依赖于 Vue 的数据响应式系统，通过 Object.defineProperty 方法将新属性添加到对象上，并设置 getter 和 setter。在使用 Vue.set 时，需要注意其适用范围和注意事项，以确保正确地使用。
Vue 中的 set 方法（十五）
坚持
03-06 479
一、改变对象的值 Vue.set(vm.userInfo, "address", "beijing"); vm.$set(vm.userInfo, "address", "shanxi");二、改变数组的值 Vue.set(vm.userInfo, 1, 6); vm.$set(vm.userInfo, 3, 100); &lt;!DOCTYPE html&gt; &...
Vue之实例方法set使用
Radom&7
11-06 305
&lt;template&gt; &lt;div id="root"&gt; &lt;!-- &lt;p v-for="item in names" :key="item"&gt;{{item}}&lt;/p&gt; --&gt; &lt;p v-for="item in list" :key="item&quo
vue.set
前端技术的学习整理
07-18 1538
一： 在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。如下代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf...
初探Vue里$set方法
yuanxinwyc的博客
03-21 1350
<template> <div class="app"> <!-- $set 用法 --> <div>{{ name }}</div> <div>{{ age }}</div> <div>{{ sex }}</div> <div>{{ info.content }}</div> </div> </templat.
vue的Vue.set方法的使用
热门推荐
原鑫的个人博客
09-17 3万+
vue的Vue.set方法的使用 vue为了更加简洁，当data的数据是数组或者对象时，动态的添加或删除，视图将不会更新 其实有些时候，当我们想动态的给data中的属性设置默认值的时候也需要用Vue.set 如图所示，想通过created给设置默认值，但是默认值可以设置成功，v-model的动态效果将会失去，这时候需要用Vue.set方法 当然了，上面也相当于给data中的数据添加...
vue中的set get方法
08-09
Vue中的set和get方法通常是用于监控Vue实例中的数据变化的。set方法用于监听数据的变化，并在数据变化时执行相应的操作，例如更新视图或执行一些逻辑。get方法则用于获取数据的值，并在获取时执行相应的操作，例如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值