首页 > 其他分享 >在Vue中可以使用方括号法获得想要的对象数据吗?

在Vue中可以使用方括号法获得想要的对象数据吗?

时间:2023-08-09 18:57:48浏览次数:40  
标签:方括号 school Vue name mobile 使用 想要

1.问题

Document {{message}}

{{school.name}}{{school[mobile]}}

在这里

{{school.name}}{{school[mobile]}}

不可以使用方括号法获得想要的对象数据吗?

2.解决

在Vue.js中,使用双花括号({{}})来插值数据是正确的,但是方括号法([])用于动态属性访问的方式是不适用的。

在你的代码中,{{school.name}} 是正确的,它会显示 黑马程序员,但是 {{school[mobile]}} 是错误的。你应该使用点号来访问对象的属性,就像你在 school.name 中所做的那样。

如果你想要显示学校的手机号码,你可以这样做:

html
Copy code

{{school.name}} - {{school.mobile}}

这将会正确地显示:

Copy code
黑马程序员 - 400-618-9000
总结起来,使用双花括号({{}})来插值数据,使用点号来访问对象的属性是 Vue.js 模板语法中的正确方法,而方括号法([])通常用于 JavaScript 动态属性访问,但在 Vue 模板中不适用。

标签:方括号,school,Vue,name,mobile,使用,想要
From: https://www.cnblogs.com/trmbh12/p/17617739.html

相关文章

  • avue-crud属性配置项参数笔记分享
     Avue是一个基于Element-plus低代码前端框架,它使用JSON配置来生成页面,可以减少页面开发工作量,极大提升效率;虽然Avue官网上面都有这些配置说明,但是如果刚开始接触不熟悉框架的话需要很久才找到自己需要的参数配置,为了方便自己今后查找使用,现将一些开发中常用的配置梳理在下......
  • vue启用https服务及nginx启用https配置
    1.vue开发环境中主要是configjs配置启用https服务devServer:{https:true,//启用https} 2.nginx 申请一个ssl证书,自行申请。 下面是一个nginx例子 需要修改的配置https主要是红色标出来部分。蓝色加粗部分主要是history模式下刷新出现404的解决办法ser......
  • vue3 + vite + vue-router 4.x项目在router文件中使用pinia报错
    1.背景vue-router4.x版本,想在路由文件中引入并使用pinia后报错如下:表面意思是getActivePinia()方法在pinia还没有激活的时候被调用,导致报错。2.解决方法在stores文件夹下新建pinia.js文件,用来引入并创建pinia实例。import{createPinia}from"pinia";const......
  • vue excel导入 补充校验
    前台校验<template><div><el-dialog:title="'校验'":close-on-click-modal="false"append-to-body:before-close="handleClose"v-if="visible":visible.sync="visib......
  • 在vue2 v-bind中使用console.log
    <el-submenuv-for="(item,index)inmenuList":key="index":index="console.log(item.name)||item.name"> main.jsVue.prototype.console=console 参考:https://stackoverflow.com/questions/51......
  • 智慧工地源码,基于Vue+Spring Cloud +UniApp框架开发
    源码技术架构:微服务+JavaVue+SpringCloud+UniApp+MySql智慧工地管理平台是依托物联网、互联网、AI、可视化建立的大数据管理平台,是一种全新的管理模式,能够实现劳务管理、安全施工、绿色施工的智能化和互联网化。智慧工地管理平台功能包括:劳务实名制管理系统、监测系统、区域安......
  • vite+vue 在html中通过script引入的文件在使用时,部署后却无法获取文件中的方法
    今天在写项目的时候,遇到了一个奇怪的问题,我再html中使用script全局引入了一个js文件,但是在组件中使用window.xxx的时候却报错了,说没有这个方法,在本地几次测试都是好的。报错前相关版本:"@vitejs/plugin-vue-jsx":"^2.0.0","@vitejs/plugin-vue":"^2.2......
  • vue+el-tree 通过下拉框选中节点,定位到当前节点,并高亮
    此处为下拉选择器:<el-selectref="searchSelect"v-model="filter"filterableremotesize="mini"clearableplaceholder="请输入关键词":remo......
  • vue import 调用方法 Import是javascript中的一种模块加载方式,在Vue中也可以使用impor
    vueimport调用方法Import是javascript中的一种模块加载方式,在Vue中也可以使用import来加载组件、库或其他模块。使用import语句,可以将需要的模块导入到当前模块的作用域中,以使其可用于当前模块内的执行。原文链接:https://www.yzktw.com.cn/post/1248672.htmlImport是javascri......
  • vue3 + ElementPlus 封装函数式弹窗组件
    需求场景:弹窗组件需要支持自定义的插槽内容,删除的弹窗也要使用这个组件,只是样式不一样而已,希望在父组件使用删除弹窗的时候直接调用某个方法就可以显示弹窗组件模拟cuDialog假设我的弹窗组件有以下的props和事件dialogVisible:控制弹窗显示和隐藏title:弹窗的标题showClose......