vue对一个json进行取值 - 神龙架游记(javaee) - ITeye博客

`

arpenker

浏览: 357477 次
性别:
来自: 广州

最近访客更多访客>>

xujianxie

guojch

唯-我-独-尊

wangyy

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

ian_jiang：不知道你说了个什么？
GWT下如何获取到javaee servlet下会话信息
心愿： index.jsp应该建立在哪个目录下
dwr3.0的HELLOWORLD创建过程
349446658： classpath:path是老的指定配置文件路径的方式。升级 ...
升级2
349446658：新版本不是在type中指定first，而是指定1来表示跳到第一 ...
分页错误2
349446658：这是因为后面的版本规范了指定配置文件路径的方式，必须指定为如下 ...
升级错误

vue对一个json进行取值

博客分类：

vue

阅读更多

如何使用vue对象，取一个json里各个对象的值。并显示出来。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue3(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>
    <script type="text/javascript">
    // 我们的数据对象
    var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
    var vm = new Vue({
        el: '#vue_det',
        data: data
    })
    // 它们引用相同的对象！
    document.write(vm.site === data.site) // true
document.write("<br>")
    // 设置属性也会影响到原始数据
    vm.site = "Runoob"
    document.write(data.site + "<br>") // Runoob

    // ……反之亦然
    data.alexa = 1234
    document.write(vm.alexa) // 1234
    </script>
</body>
</html>

撸一下逻辑。

1.引入js.
2.先定义一个json数据串。
3.new 一个vue对象。并且把JSON数据串赋给data对象。
然后就可以使用vue对象取它下面的各个值。并且输出了。

分享到：

vue调用自定义函数，并且修改其值。 | vue

2022-07-13 09:44
浏览 3901
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

ajax 解析json数据: 当服务器返回JSON数据时，我们需要将其转换为JavaScript对象进行处理。以下是使用`XMLHttpRequest`解析JSON的步骤： 1. 创建`XMLHttpRequest`实例。 ```javascript var xhr = new XMLHttpRequest(); ``` 2. 设置...

JSON取值前判断: ### JSON取值前判断在处理JSON数据时，经常需要从JSON对象中获取特定的键值。但在实际操作中，并非所有的JSON对象都会包含我们所需的键。因此，在尝试获取某个键的值之前进行存在性检查是非常重要的。这不仅可以...

详解如何在Vue项目中发送jsonp请求: 起因公司临时要支撑河南的一个项目，做一个单点登录的功能。简单来说，就是以下3步 ... 在页面a中由前端发送一个jsonp请求到客户方，得到一个token值 ...前端得到token值后向自己后端...经过辗转Google，发现了*vue-json

基于Vue与JavaScript的数据大屏可视化编辑器设计与实现: 本文主要探讨的是如何利用Vue.js和JavaScript技术来构建一个数据大屏可视化编辑器。Vue.js是一个轻量级的前端框架，JavaScript则是Web开发的核心语言，两者结合可以实现强大而灵活的交互式应用。首先，Vue.js以其...

当json键为数字时的取值方法解析: json的键必须是一个对象，才能取出东西，如： var aa={‘s111s’:’aaaaa’}; var idd=”s111s”; alert(sss.idd); 解答：对于数字键名或者非正常变量字符（比如有空格），必须使用 aa[x]的方式。var aa={...

Day02_vue脚手架_基础API(1).pdf: `new`关键字用于创建一个类的实例，对象的属性和方法可以通过键值对来定义，而`this`在不同上下文中的指向可能不同，函数中的`this`通常指向调用该函数的对象，而在箭头函数中，`this`则保持对外层作用域的引用。...

vue.js配合$.post从后台获取数据简单demo分享: 这个过程涉及到前后端数据交互的基本概念，并结合了Vue.js的响应式数据绑定特性，实现了一个简单的动态内容展示效果。知识点一：Vue.js基础 Vue.js是一个构建用户界面的渐进式JavaScript框架。它专注于视图层，...

Vue.js使用axios动态获取response里的data数据操作: 在Vue.js应用中，我们经常需要使用axios库来与服务器进行数据交互，获取或发送JSON数据。在本文中，我们将探讨如何动态地从axios的response对象中的data属性获取数据，特别是在data是一个对象且其键（key）是动态的...

使用element中el-cascader级联选择器：实现省市区街道筛选、动态懒加载以及回显: 全国省市区街道的json数据

vue-swift-i18n:适用于Vue开发人员的Swift I18n vscode插件: Vue i18n:house::sparkles: 快速开始契子...自动替换成步骤 1 生成的 json 的 key检测 vue/js 文件中的已替换的 key，展示对应汉字提示弹窗xxx.json 文件中，生成扁平化的 locales 的 xxx_flat.json 文件,方便取值复制

easyui-textbox和easyui-combobox的onchange事件响应实例: 在前端开发中，EasyUI 是一个基于 jQuery 的 UI 框架，它提供了一系列美观、易用的组件，用于构建用户界面。在这个实例中，我们将深入探讨 EasyUI 中的两个重要组件：`easyui-textbox` 和 `easyui-combobox`，以及...

web前端重点业务难点: 13. JavaScript 中的闭包是一个引用了父环境的对象，并且从父环境中返回到更高层的环境中的一个对象。 14. 在 JavaScript 中，0、""、null、undefined、false 在 if 语句中都表示 false，但并不等于 false。 15. ...

S2结业机试-FinancingProductSys.zip: EL（Expression Language）用于在JSP中进行数据表达和取值，使得页面和后台数据的交互更为简洁。 3. **MVC模式**：Model-View-Controller模式是JavaWeb开发中常见的设计模式，有助于实现业务逻辑、数据和显示的分离...

传智博客JavaWeb经典面试题目: JavaWeb开发是Java技术领域中的一个重要组成部分，它涉及服务器端编程、数据库交互、网络通信等多个方面。传智博客作为知名的IT教育平台，由张孝祥老师精心整理的JavaWeb面试题目，旨在帮助求职者更好地理解和掌握这...

Global site tag (gtag.js) - Google Analytics