Vue中如何判断对象是否为空

目录
  • Vue判断对象是否为空
    • 方法一
    • 方法二
  • Vue判断对象为空|cannot read property ‘xx‘ of undefined
    • 结构体如下
    • 解决方法
    • v-for中的key理解

Vue判断对象是否为空

方法一

将对象转JSON，如果为空集合{} ，那么就是空对象

JSON.stringify(object)=='{}'

方法二

判断对象的长度，如果为零，那就是空对象

Object.keys(object).length==0

Vue判断对象为空|cannot read property ‘xx‘ of undefined

vue中判断对象为空

结构体如下

在调用text.value时，因默认情况下text为空报错

解决方法

使用 typeof 对text进行判断是否为 undefined

存在问题

当判断text.value时会失效，因为text就不存在，value更不用说了所以直接判断text就可以了

依据

在ESLint 0.5.0中引入 typeof操作符，用于强制与有效的字符串进行比较 ESLint文档地址

typeof通常与以下字符串比较：undefined、object、boolean、number、string、symbol和bigint

与其他字符串比较时，通常是个书写错误

Options

该规则有一个对象选项：

"requireStringLiterals": true 要求 typeof 表达式只与字符串字面量或其它 typeof 表达式 进行比较，禁止与其它值进行比较。

错误 代码示例：

/*eslint valid-typeof: "error"*/
typeof foo === "strnig"
typeof foo == "undefimed"
typeof bar != "nunber"
typeof bar !== "fucntion"

正确 代码示例：

/*eslint valid-typeof: "error"*/
typeof foo === "string"
typeof bar == "undefined"
typeof foo === baz
typeof bar === typeof qux

选项 { "requireStringLiterals": true } 的 错误 代码示例：

typeof foo === undefined
typeof bar == Object
typeof baz === "strnig"
typeof qux === "some invalid type"
typeof baz === anotherVariable
typeof foo == 5

选项 { "requireStringLiterals": true } 的 正确 代码示例：

typeof foo === "undefined"
typeof bar == "object"
typeof baz === "string"
typeof bar === typeof qux

v-for与v-if 同时存在时，渲染错误

解决方法

外层加一个template把v-for放在template标签中

v-for中的key理解

v-for 是循环，可以把数组中的元素遍历出来，

vue3中，必须要有key参数，key就相当于索引，

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue前端判断数据对象是否为空的实例

    看代码: Vue提供了强大的前端开发架构,很多时候我们需要判断数据对象是否为空,使用typeof判断是个不错选择,具体代码见图. 补充知识:vue打包后 history模式 跟子目录 静态文件路径 分析 history 根目录 路由mode变为history后,需要在服务器配置 url重写,在根目录 创建web.config文件 加下面内容复制进去 <?xml version="1.0" encoding="utf-8"?> <configurat

  • vue如何将对象中所有的key赋为空值

    vue如何将对象中所有的key赋为空值

    目录 将对象中所有的key赋为空值 先来看看Object.assign的基本用法 vue空值报错问题 将对象中所有的key赋为空值 Object.assign的使用,当然你也可以使用for去遍历 然后再一一去赋值为空字符串,推荐使用(Object.assign) 先来看看Object.assign的基本用法 Object.assign方法用于对象的合并,第一个参数(目标对象),可以有第二个,第三个参数,都是源对象,将源对象(source)的所有可枚举属性,复制到目标对象(target). con

  • vue-form表单验证是否为空值的实例详解

    重点部分:点击表单的 submit按钮 触发form 部分 @submit="submit"事件: submit事件 定义在js部分: prevent:文档上说了在事件后面加上 .prevent就可以阻止默认事件了. form @submit.prevent="submit" <form @submit.prevent="submit"> <input type="text" v-model="us

  • Vue中如何判断对象是否为空

    Vue中如何判断对象是否为空

    目录 Vue判断对象是否为空 方法一 方法二 Vue判断对象为空|cannot read property ‘xx‘ of undefined 结构体如下 解决方法 v-for中的key理解 Vue判断对象是否为空 方法一 将对象转JSON,如果为空集合{} ,那么就是空对象 JSON.stringify(object)=='{}' 方法二 判断对象的长度,如果为零,那就是空对象 Object.keys(object).length==0 Vue判断对象为空|cannot read proper

  • JavaScript中如何判断对象是否为空的方法

    目录 Object.keys() 示例 为什么需要额外判断对象的构造函数呢? 另一种边界情况 总结 在自己的日常开发中,一般使用Object.keys()来判断对象是否为空: const obj = {}; Object.keys(obj).length === 0 // true 则为空对象 而在一篇文章中却是如此判断: const obj = {}; Object.keys(obj).length === 0 && obj.constructor === Object 为什么还要额外判

  • Java中判断对象是否为空的方法的详解

    首先来看一下工具StringUtils的判断方法: 一种是org.apache.commons.lang3包下的: 另一种是org.springframework.util包下的.这两种StringUtils工具类判断对象是否为空是有差距的: StringUtils.isEmpty(CharSequence cs); //org.apache.commons.lang3包下的StringUtils类,判断是否为空的方法参数是字符序列类,也就是String类型 StringUtils.isEmpt

  • freemarker判断对象是否为空的方法

    FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP.它不仅可以用作表现层的实现技术,而且还可以用于生成XML,JSP或Java 等. freemarker中显示某对象使用${name}. 但如果name为null,freemarker就会报错.如果需要判断对象是否为空: <#if name??> -- </#if> 当然也可以通过设置默认值${name!''}来避免对象为空的错误.如果name为空,就以默认值("!"后的字

  • JS实现判断对象是否为空对象的5种方法

    1.将json对象转化为json字符串,再判断该字符串是否为"{}" var data = {}; var b = (JSON.stringify(data) == "{}"); alert(b);//true 2.for in 循环判断 var obj = {}; var b = function() { for(var key in obj) { return false; } return true; } alert(b());//true 3.jquery的

  • 关于thymeleaf判断对象是否为空的相关逻辑处理

    目录 thymeleaf 判断对象是否为空有关逻辑 场景一 场景二 Thymeleaf基础语法 一.引用命名空间 二.常用th标签 三.Thymeleaf中的URL写法 四.用Thymeleaf进行条件求值 五.Switch 六.Thymeleaf中的字符串替换 七.Thymeleaf的运算符 八.Thymeleaf公用对象 thymeleaf 判断对象是否为空有关逻辑 场景一 在项目中,有时会遇到下面场景: 添加页面和编辑页面共用一个页面,而通过后台传来的对象来判断提示用户是编辑页面还是添加页

  • jquery判断对象是否为空并遍历对象的简单实例

    javascript : if(document.getElementById("target_obj_id")){ } else { } jquery: 因为 $("#target_obj_id") 不管对象是否存在都会返回 object ,所以以上方法不行 1. var target_obj = jQuery('#target_obj_id'); if (target_obj.length > 0) { //如果大于0 标识 id 为target_obj_

  • Java判断对象是否为空(包括null ,"")的方法

    本文实例为大家分享了Java判断对象是否为空的具体代码,供大家参考,具体内容如下 package com.gj5u.publics.util; import java.util.List; /** * 判断对象是否为空 * * @author Rex * */ public class EmptyUtil { /** * 判断对象为空 * * @param obj * 对象名 * @return 是否为空 */ @SuppressWarnings("rawtypes") public

  • vue中js判断长时间不操作界面自动退出登录(推荐)

    需求说明,后台有做半个小时不请求接口的话返回标识退出登录,但是要请求接口才行,现在要实现前端用js判断半个小时不操作界面的话自动跳转到登录页面. 创建一个.js文件,在main.js引入此js(vue框架) 在登录成功的时候保存当前时间localStorage.setItem("lastTime",new Date().getTime()); 然后在点击的时候更新这个时间 var lastTime = new Date().getTime(); var currentTime = ne

  • vue中的循环对象属性和属性值用法

    v-for除了可以循环数组,还可以循环对象. 例子: <template> <div> <div v-for="(item,i) in obj">{{i}}--{{item}}</div> </div> </template> <script> export default { name: "HelloWorld", data () { return { obj:{ age:1, n

随机推荐