Vue使用$set和$delete操作对象属性

更新时间：2022年03月14日 11:50:02 作者：.NET开发菜鸟

这篇文章介绍了Vue使用$set和$delete操作对象属性的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

一、$set

在开始讲解$set之前先看下面的一段代码，实现的功能：当点击“添加”按钮时，动态的给data里面的对象添加属性和值，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加属性</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#app',// 2.0不允许挂载到html,body元素上
                data:{
                    info:{id:1,price:15,name:"套餐A"}
                },
                methods:{
                    add:function(){
                        // 给info对象添加msg属性并赋值
                        this.info.msg="hello";
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="app">
        {{info.msg}}
        <button @click="add">添加</button>
    </div>
</body>
</html>

先看看点击按钮之前的效果：

从截图中可以看出这时info对象只有三个属性，点击“添加”按钮刷新，然后在看看info对象的属性，截图如下：

可以看出这时info对象增加了msg属性，但是界面上面没有显示出来msg属性的值。即：

如果在实例创建之后添加新的属性到实例上，不会触发视图更新。

这时就需要使用$set了。代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加属性</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#app',// 2.0不允许挂载到html,body元素上
                data:{
                    info:{id:1,price:15,name:"套餐A"}
                },
                methods:{
                    add:function(){
                        // 给info对象添加msg属性并赋值
                        //this.info.msg="hello";
                        this.$set(this.info,"msg","hello");
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="app">
        {{info.msg}}
        <button @click="add">添加</button>
    </div>
</body>
</html>

效果：

可以看出：使用了$set之后视图会被更新。

注意：如果是修改对象里面已经存在的属性，则直接修改即可

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加属性</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#app',// 2.0不允许挂载到html,body元素上
                data:{
                    info:{id:1,price:15,name:"套餐A"}
                },
                methods:{
                    add:function(){
                        // 给info对象添加msg属性并赋值
                        //this.info.msg="hello";
                        this.$set(this.info,"msg","hello");
                    },
                    modify:function(){
                        this.info.name="套餐B";
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="app">
        {{info.msg}}
        name值：{{info.name}}
        <button @click="add">添加</button>
        <button @click="modify">修改</button>
    </div>
</body>
</html>

效果：

二、$delete删除对象属性

可以使用$delete删除对象里面的属性，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加属性</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#app',// 2.0不允许挂载到html,body元素上
                data:{
                    info:{id:1,price:15,name:"套餐A"}
                },
                methods:{
                    add:function(){
                        // 给info对象添加msg属性并赋值
                        //this.info.msg="hello";
                        this.$set(this.info,"msg","hello");
                    },
                    modify:function(){
                        this.info.name="套餐B";
                    },
                    del:function(){
                        // 删除info对象里面的price属性
                        this.$delete(this.info,"price");
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="app">
        {{info.msg}}
        name值：{{info.name}}
        <button @click="add">添加</button>
        <button @click="modify">修改</button>
        <button @click="del">删除</button>
    </div>
</body>
</html>

效果：

到此这篇关于Vue使用$set和$delete操作对象属性的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

使用Vue.js和Flask来构建一个单页的App的示例
本篇文章主要介绍了使用Vue.js和Flask来构建一个单页的App的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
在vue项目中实现定义全局变量全局函数操作
这篇文章主要介绍了在vue项目中实现定义全局变量全局函数操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Vue Steps步骤条渲染异常问题
这篇文章主要介绍了Vue Steps步骤条渲染异常问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
vuejs实现标签选项卡动态更改css样式的方法
这篇文章主要介绍了vuejs实现标签选项卡-动态更改css样式的方法，代码分为html和js两部分,需要的朋友可以参考下
2018-05-05
基于vue中css预加载使用sass的配置方式详解
下面小编就为大家分享一篇基于vue中css预加载使用sass的配置方式详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue中同时监听多个参数的实现
这篇文章主要介绍了vue中同时监听多个参数的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue 项目中遇到的跨域问题及解决方法(后台php)
这篇文章主要介绍了Vue 项目中遇到的跨域问题及解决方法(后台php)，前端采用vue框架，后台php，具体解决方法，大家参考下本文
2018-03-03
Vue+NodeJS实现大文件上传的示例代码
常见的文件上传方式可能就是new一个FormData，把文件append进去以后post给后端就可以了。但如果采用这种方式来上传大文件就很容易产生上传超时的问题。所以本文将利用Vue+NodeJS实现大文件上传，需要的可以参考一下
2022-05-05
vue-cli项目使用mock数据的方法（借助express）
现如今前后端分离开发越来越普遍，前端人员写好页面后可以自己模拟一些数据进行代码测试，这样就不必等后端接口，提高了我们开发效率。今天就来分析下前端常用的mock数据的方式是如何实现的,需要的朋友可以参考下
2019-04-04
一文轻松理解Vuex
这篇文章主要介绍了Vuex及其使用方法，感兴趣的同学，可以参考下
2021-04-04

Vue使用$set和$delete操作对象属性

一、$set

二、$delete删除对象属性

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具