Vue的{{}}如果绑定对象则无法重新渲染显示，如果绑定值则可以重新渲染

已于 2022-06-24 16:52:26 修改
阅读量228 收藏
点赞数
分类专栏： 前端 文章标签： vue.js 前端
于 2022-06-24 15:41:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjy1575944940/article/details/125446530
版权

今天遇到个业务是这样，
在这里插入图片描述
项目使用的是vue框架，所以这边使用双向绑定来显示，一开始是这么做的
请添加图片描述
得到数据的时候是这么得到的请添加图片描述
定义数据格式
请添加图片描述
然后发现无论怎么做，他都会显示成区级审核
然后调试，发现此时在页面里竟然为null了
请添加图片描述
实际上值是有的，但是却没有渲染出来
如果改成这种形式，不是赋给对象的属性，而是赋给其中一个变量
请添加图片描述
然后相应的赋值也改下
请添加图片描述

此时竟然又可以渲染出来了

请添加图片描述

原来为双向绑定的值为topic.isCity，有时会无法渲染，
但是改成了isCity，此时就可以渲染出来了。
非常奇怪的一个现象

小麟有点小靈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue强制组件重新渲染的方法讨论
10-15
对于那些 Vue 无法检测到的数组或对象的变化，可以使用 `Vue.set` 或组件实例上的 `this.$set` 来添加新的属性或修改现有属性，从而触发响应式更新。 总结来说，虽然 Vue 提供了多种强制组件重新渲染的方法，但...
vue将data恢复到初始状态 && 重新渲染组件实例
10-14
当条件改变时，Vue会销毁并重建绑定`v-if`的元素，这会导致组件重新渲染。然而，频繁使用`v-if`可能导致性能下降，因此不建议作为首选方法。 2. **修改组件的`key`值**：在组件上设置一个`key`属性，并在需要重新...
vue双向绑定不生效、对象中的属性值发生改变页面不会重新渲染问题解决办法
Jeremy Liu的博客
11-18 5617
文章目录vue双向绑定原理方法一 增加一个基本类型的变量方法二 使用整体对象替换方法三 使用vue文档提供的方法 vue双向绑定原理 vue深入式响应原理，当我们在data中声明变量对象，Vue 将遍历此对象所有的 property（如下面的person，list，school，score），并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。 <div v-for="(item,index) in list" :k
vue 值改变后界面没有变_VUE开发中，数据变化后，修改了绑定对象的属性值后，页面dom没有发生变化，两种方法可以重新渲染$set和$forceUpdate...
weixin_34246474的博客
01-15 894
最近在开发中遇到一个在form表单对象里，有个图片上传的组件，上传成功后返回数据赋值后，图片没有展示出来当我上传图片成功后给form.imgUrl赋值后，页面并没有出现图片的缩略图该怎么解决呢：方法1.$set// 上传成功回调函数handleAvatarSuccess(res, file) {this.$set(this.form,'imgUrl',res.data);},方法2.$forceU...
vue双向绑定的原理（响应式+组件渲染和更新过程）
qq_25503949的博客
08-05 508
vue双向绑定的原理（响应式+组件渲染和更新过程） 首先vue是MVVM模型，把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了 双向绑定在vue可以通过v-modal实现 view改变，modal里面data会发生改变，可以通过事件监听即可，比如v-
【千方百计】更改绑定的数据对象数值后，DOM重新渲染的4种方法
最新发布
追寻上飞的博客
10-19 4059
本篇博客是博主记录在项目开发中遇到的Vue前端界面UI更新问题，界面更新就是对界面元素的更新。下述4中方法均是Vue框架本身提供的更新UI界面的API，按照接口对UI刷新操作后影响的程度进行升级描述。第一原则：既然使用了Vue，应该将作用域中的对象都成为响应式的，更改数据的时候，UI也跟着更新。但是总会遇到UI未更新的情况，因此，需要其它手段来达到UI更新的目的。一般地将这4种方法用于v-model绑定数据更新失效的场景下进行UI重新渲染。
vue {{}}中元素不显示的问题
weixin_43822858的博客
07-27 5256
今天工作中遇到了这个问题，在csdn看了几个帖子之后终于发现了为什么{{}}中的元素不解析。 我的情况是vue没有实例化， 就是如图红框这一块没写，发了好几个帖子发现大都是vue没有正确使用的问题(vue没正确引入，vue引入位置不正确)。大家可以仔细查看一下自己的代码。 下面是在https://blog.csdn.net/qq_42363090/article/details/99838712帖子看到的一段正确引入实例： <html> <head> <title&g
vue修改对象的属性值后页面不重新渲染的实例
10-18
然而，在某些情况下，当你直接修改对象的属性，Vue可能无法检测到这种变化，从而导致页面不重新渲染。本文将深入探讨这个问题，并提供解决方案。 首先，让我们分析问题所在。在给出的实例中，当用户点击“编辑”...
vue中渲染对象中属性时显示未定义的解决
10-15
如果对象结构较复杂，也可以考虑不通过中间对象，而是直接将后端返回的数据赋值给独立的对象： ```javascript data() { return { clientInfo: {} }; }, created() { this.clientInfo = this.someApiResult...
详解vue 数组和对象渲染问题
10-17
在Vue.js中，数组和对象的渲染问题是开发者经常会遇到的挑战。Vue的响应式系统依赖于数据劫持来实现视图与数据的双向绑定。当数组或对象的属性发生变化时，视图通常会自动更新以反映这些变化。然而，由于JavaScript...
vue中双大括号里面的内容显示不出来怎么办
qq_55278081的博客
08-16 2014
后来改成这样就对了：
vue学习：解决vue变量未渲染前代码显示问题
热门推荐
不吃菠菜的大力
06-16 1万+
在vue变量未渲染前，会有一瞬间显示代码，影响代码美观。vue有现成的指令来解决这个问题：v-cloak 在css中加入： [v-cloak]{ display: none; }在需要元素加上： {{demo}} 这样，v-cloak所在元素下的变量在未渲染前不会显示。
二、Vue实例对象及其属性
Lvruoyu的博客
04-21 6510
01. Vue实例 Vue实例 通过new关键字实例化Vue({})构造函数 <script> new Vue({ el: "#app", data: { msg: "Hello World" } }) </script> Vue实例配置对象 选项 说明 data Vue实例数据对象 methods 定义Vue实例中的
vue15-修改对象值触发vue绑定改变
徐海兴的专栏
09-24 5050
首先看下面代码： &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Hello world&lt;/title&gt; &lt;script src="vue.js"&gt;&am
vue加载显示{{xxx}}的解决方法
prayer的博客
07-28 9392
一般vue.js文件放在最后，由于浏览器是从头到尾的渲染机制，在没有读取到识别符对应的js控制语句就会直接显示{{xxx}} 这个问题可以用vue的一个特点解决，就是Vue会自动屏蔽掉自定义属性 我们可以为对应的dom节点添加一个自定义属性，比如 dom-hidden（官方：v-cloak） 然后css定义 ：    [dom-hidden]{ display:none;} 这个属性在vu...
vue 绑定对象，数组 数据无法动态渲染
qq_43127193的博客
09-08 559
项目场景： 黑马vue项目管理实战，获取商品分类，展开栏的标签页中修改修改数据属性 问题描述： 在本该点击+new tag这个标签页时弹出一个input框让用户输入需要添加的属性 结果点击时却不能立马渲染 async getParametersList() { this.cat_id = this.currentSelect[this.currentSelect.length - 1]; const { data: res } = await this.$http
Vue 数据绑定
秋殇阁
06-23 5257
数据绑定就是将页面的数据和视图关联起来，当我们的数据变化的时候，视图可以自动更新。 插值 文本插值是数据绑定的最基本形式，使用双花括号“{{ }}”,这种语法在Vue里面也称之为Mustache语法。 &lt;div id="app"&gt; {{content}} &lt;/div&gt; &lt;script src="h...
vue对象和函数
li1484155613的博客
10-02 1174
1、外部调用变量和函数 （1）通过$data获取 （2）通过实例化就可以获取 <script src="vue.js"></script> <script> window.onload=function fun(){ var value={a:1,b:2} var v=new Vue({ ...
Vue入坑教程(一) - 实例化Vue对象
清晨的光明
04-05 4851
一、为什么要学Vue？ 先把Vue官网放出来 ????Vue官网，任何时候最权威的教程就是官网！ 但是问题来了，官网是权威，但是不一定是最容易理解的???? 转入正题，为什么要学Vue？ 首先说说我为什么要学习Vue，其实多半是出于无奈，最近在实验室做一个项目，开始是用Django框架，但是做到一半发现项目的前端需要频繁向后端请求数据然后显示到前端，而且需要大量复用元素块。于是查了很...
Vue指令详解：列表渲染、表单绑定与安全实践
首先，**列表渲染指令** `v-for` 是Vue中处理数据驱动视图的关键工具，通过它可以根据数组或对象循环渲染元素，实现列表展示。例如，当你需要遍历一个数组并创建一个元素集合时，可以使用`v-for`指令配合`<li>`元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值