如何使用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加载json文件的方法。分享给大家供大家参考,具体如下: 一、在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版): var appData = require('../address.json'); // ...
vue package.json 配置 直接npm run dev即可 vue package.json 配置 直接npm run dev即可
最新的vue读取本地json文件数据,下载解压,运行cmd,cd到这个目录,运行npm yun dev,然后直接访问就能获取数据
合并两个json纯对象,例如用json存放的模板文件,和另外一个json数据存在差异,此时很可能需要合并两个数据。可以用此函数。 由于作者不太喜欢json里面还存在数组,所以暂未考虑json数据中还存在普通数组的情况。...
如何解决@RequestParam无法接收vue+axios传递json数据(csdn)————程序
基于Vue的JSON可视化编辑器,通过定义 JSON Schema 直接生成 UI 界面
开始的时候我以为,用vue去调取json要多么的麻烦,完咯就先去的百度,找了几个,看上面又要配置这配置那的,看的我都头大,像一些思维逻辑清晰的肯定不会出现这种情况。 下面我说下我这的情况,大家依情况代入 当然...
这是一款vue.js+json制作的动态表格数据查询筛选代码,支持输入关键词搜索查询筛选表格数据列表。
谷歌插件 vue和json美化
一个基于的表单生成器,带上您的组件! 使用任何Vue组件或HTML元素! 没有预构建的组件可以让您困惑您的表单。 相反,您可以使用发出事件,自定义或本机事件的任何组件或元素。 请注意,基本上所有使用v-model Vue...
//vue配置请求本地json数据 const express = require('express') const app = express() const appData = require('../static/major_info.json')//加载本地json文件 const majorlist = appData.contents;//获取本地...
vue ant 省市区json
使用vue.js和element-ui实现的网页版的JSON编辑器,使用之前需要安装NODE.js和npm,使用之前需要安装NODE.js和npm;非常好的代码示例,开箱即用
这个直接是个data,放入你的vue2项目中即可。(因为我的项目是用的vue2,所以,其他的属性跟博客内容是吻合的。请配合博客再下载此json)
Vue JSON树视图演示和博客文章您可以在JSFiddle上查看该,并通过阅读名为Vue.js中的 ,以创建该库。安装使用npm安装插件: npm install --save vue-json-tree-view 然后,在您的Application JavaScript中,添加: ...
该项目的目的是创建一个简单的Vue组件,该组件能够根据构建HTML表单,并且默认情况下使用语义。 入门 克隆此存储库,安装依赖项并使用dev命令运行。 # Clone this repository git clone ...
JSON 转 数组方法
1、这是一款格式化 json 数据的插件 2、让 json 数据看起来更加的美观 3、收费只是想让你们知道资源得来不易
vue-form-json验证生成Vue表单所有字段都是必填字段,默认情况下输入文本。 提交后,将在$ root上发出带有formName和所有值的事件“ formSubmitted”。特征从数组生成表单(formFields属性) 默认情况下,布尔玛类...
vue3-json-schema-form a form generator based on jsonschema for vue3 Project setup npm install npm run serve npm run build npm run test:unit npm run lint API 设计 value={value} xss=removed locale={...