vue中对象赋值使用.和{}两种方法是有区别的。{}可以实现$set的效果

最新推荐文章于 2023-11-29 09:37:13 发布
最新推荐文章于 2023-11-29 09:37:13 发布
阅读量1k 收藏
点赞数
文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Slugs_in_the_sea/article/details/111303103
版权

如题 被{}赋予属性的对象，打印结果中含有get set方法，可以触发vue视图的更新。在_ob_中可被监听。
效果同
this.$set(this.errors,'phone',"手机号码不能为空")在这里插入图片描述
在这里插入图片描述
而用点直接赋值的方式，看一下打印结果

this.errors.phone="手机号码不能为空"

在这里插入图片描述
可见_ob_内不含有get set方法 虽然成功赋值，但不会更新视图。所以左面没有出现提醒效果。
那么也不是完全没有办法的。可以使用this.$forceUpdate()方法，触发视图强制更新，一样可以实现功能
在这里插入图片描述
在这里插入图片描述
不含set get 功能一样实现撩

きっとかなうから
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中 this.$set的用法详解
10-16
`this.$set` 方法就是为了解决这个问题而设计的，它可以确保即使在非响应式对象上添加或修改属性，Vue也能正确地追踪变化并更新视图。 首先，我们来看一个简单的例子。在这个例子中，我们有一个`items`数组，包含三...
vue中$set的使用(结合在实际应用中遇到的坑)
08-27
在上面的代码中，我们使用 $set 方法将 edit 字段添加到 element 对象中，并赋值为 false。 在实际应用中遇到的坑 在实际应用中，我们可能会遇到点击事件不执行的问题。这是因为数据不同步的原因。当我们在节点...
vue中v-text，v-html, v-model, {{}}之间的异同
热门推荐
yummyH
10-09 6万+
首先我们知道vue中有很多自定义指令，以v- 开头，例如：v-text，v-bind，v-model, v-if,等 在这些指令中，部分指令之间是很容易被混淆，所以今天决定自己总结一下以下几个相似指令之间的异同： 1.v-text v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变
Vue 把一个对象赋值给多个属性，让属性之间不是指向同一个地址
zcl520sy的博客
04-09 1356
JSON.parse(JSON.stringify(this.tableData))
vue中对 {} 赋值 $set () 的正确使用方式
小落的博客
03-27 375
众所周知，直接给 student 赋值操作，虽然可以新增属性，但是不会触发视图更新。如下代码：给 student 对象新增 age 属性。vue 给对象新增属性，并触发视图更新。
vue 可以 {{}} 在里面定义变量吗
weixin_35756624的博客
01-15 657
<p>是的，Vue 中可以使用 {{}} 来定义变量。在 {{}} 中可以放入 JavaScript 表达式，Vue 会将其解析并替换成结果。 例如： <template> <div>{{ message }}</div> </template></p> <script> export default { ...
vue基本语法01赋值、表达式、指令、修饰符、简写、过滤、监听
qq_45555170的博客
10-08 1425
vue基本语法01赋值、表达式、指令、修饰符、简写、过滤、监听一、vue赋值的三种方式二、表达式三、指令四、修饰符五、监听 一、vue赋值的三种方式 1、{{属性名}} <h2>{{data}}</h2> 2、v-html:能输出源码信息 <input v-model="name"/> 3、v-text：只能输出文本信息 <div v-text="sa" style="color: blue;"></div> 二、表达式 vue支持所有的js
【JavaScript源代码】Vue.set()和this.$set()使用和区别.docx
12-29
这涉及到Vue.set()和this.$set()这两个方法，它们在处理非原始数据类型（如对象）的动态属性时起着关键作用。 Vue.set()和this.$set()的主要用途是在Vue实例创建后，添加或修改数据对象的属性，并确保这些变更能够...
vue.js中$set与数组更新方法
01-21
当然vue中给了解决方法，就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice，caoncat等修改数组，同时也将触发状态更新： ex： 所以如果在实例创建后添加新的属性到实例上，则不会触发更新。 ps：现在有两...
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
为了避免`this`指向问题，你可以先在函数内部创建一个变量来保存Vue实例的引用，然后在回调函数中使用这个变量来调用`$set`方法： ```javascript methods: { textTranslate: function (text, to) { let vm = this...
温故一下JavaScript中 [] 、{} 、() 区别
shenenhua的博客
03-25 2887
温故一下JavaScript中 [] 、{} 、() 区别，大多数情况下[]数组，{}对象，()函数参数，具体看内容
解构赋值，使用{}取想要的值
jieweiwujie的博客
07-08 123
解构赋值，使用{}取想要的值
修改、赋值
娓娓道来
11-22 278
if (GetQueryString('title') == 'U') { getStaffOne(GetQueryString('v_Id'), GetQueryString('v_MyNodeId')); form.val("formStaff", { "v_CompanyName": res.v_MyNodeName, "v_Country": res.v_Countr...
【Vue中对象直接赋值的坑】
Da_Xiong的博客
07-13 6314
Vue中对象直接赋值的坑
Vue 对象属性格式（学习总结）
往南的博客
09-23 564
格式： let demo = new Vue({ el: '对应的元素ID（在这个元素下可以直接调用vue对象的属性和方法）', data: { 数据1: '', 数据2: '', .... }, created: function() {}, // 页面加载就会调用该函数 methods: { method1: function(){}, method2: function(){}
Vue基础-创建vue的对象
weixin_72492001的博客
08-11 3787
Vue基础-创建vue的对象
vue3计算属性以及赋值
最新发布
blog
11-29 1859
【代码】vue3计算属性以及赋值。
Vue2基础-Vue对象介绍
ning_xiao_xuan的博客
11-08 478
Vue2基础-Vue对象介绍
Vue基础
qq_45638271的博客
05-04 319
Vue快速入门详解 Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。 let vm = new Vue({ 选项列表; }); 选项列表 1. el选项：指定的vue控制区域。(根据选择器获取) 2. data选项：用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。 3. methods选项：用于定义方法。方法可以直接通过对象名调用，this代表当前Vue对象。 数据绑定 在视图部分获取脚本部分的数据: (插值表达式) {{变量名}} Vu
vue.$set和vm.$set有什么区别
11-16
根据提供的引用内容，可以得知`Vue.set()`和`vm.$set()`都可以用来向Vue实例中的响应式对象添加属性并触发视图更新。它们的区别在于`Vue.set()`可以用于全局对象，而`vm.$set()`只能用于当前实例。具体来说，`Vue.set()`的语法为`Vue.set(target, key, value)`，而`vm.$set()`的语法为`vm.$set(target, key, value)`。其中，`target`是要添加属性的对象，`key`是属性名，`value`是属性值。 举个例子，假设我们有一个Vue实例`vm`，其中有一个响应式对象`list`，我们想要向`list`中添加一个新属性`newProp`，可以使用以下两种方法： ```javascript // 使用Vue.set() Vue.set(vm.list, 'newProp', 'new value'); // 使用vm.$set() vm.$set(vm.list, 'newProp', 'new value'); ``` 这两种方法的效果是一样的，都会向`list`中添加一个新属性`newProp`并触发视图更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值