时间:2021-05-25
最近接到一个比较简单的项目,不准备使用数据库,打算用JSON数据就可以了。结合当前火热的VUE.JS进行数据渲染。
尽管不打算使用数据库,可是一般的操作增删查改依旧是少不了的。如果使用到数据库的话,不妨做一个API出来,那么网站、APP等都可以依照这个进行操作。在这篇文章里面,我们只是打算简单的引用而已。
下面先来看看我的JSON文件,这里是一个类别文档Category.json:
{ "msg": "ok", "data":[{ "ID":"1", "name": "地产", "Url":"/Category/List/1"},{ "ID":"2", "name": "科技", "Url":"/Category/List/2"},{ "ID":"3", "name": "医药", "Url":"/Category/List/3"},{ "ID":"4", "name": "其他", "Url":"/Category/List/4"}]}下面我们通过Javascript进行渲染,将数据渲染到导航里面去。这里有两种方式:如果你的项目已经带有JQuery的话,可以参考一下使用下面的代码:
$(function(){ $.ajax({ type:'get', url:'Category.json', success: function(data){ if(data.msg == "ok"){ pushDom(data.data); } else { alert("服务器返回异常"); } }, error: function(data){ alert(JSON.stringify(data)); } }); function pushDom(data1){ var vm = new Vue({ el: '#app', data: { peps:data1 } }); }})然后到html中,把数据渲染出来
<div id="app" class="inner"> <ul v-for = "pep in peps "> <li><a href="{{pep.Url}}" rel="external nofollow" > {{pep.name}}</a></li> </ul> </div>上面的代码是使用JQuery的$.ajax 将json的数据引入,但如果你的项目里面没有使用到JQuery的话,就要使用到vue-resource.js了。
在html中引入:
<script src="/js/vue.js"></script><script src="/js/vue-resource.js"></script>我第一次使用vue-resource.js的时候,和vue.js版本不匹配居然屡屡出错,这是新手必须要注意的。这是一个坑啊,如果你们运行下面的代码不能渲染的话,99%是遇到这个坑了。
<script> var app = new Vue({el: '#app',data: { peps: '' },mounted: function() { this.getJsonInfo()},methods: { getJsonInfo: function() { this.$http.get('Category.json').then(function(response){ console.log(response.data.data) var resdata = response.data.data this.peps = resdata }).catch(function(response){ console.log(response) console.log("居然没有弹窗") }) } }})</script>html处不用做其它修改。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vue.js动态获取数据库数据(通过vue.cli和webpack搭建的环境)1.首先我先在创建一个静态的data.json文件,在static下创建json文
本文实例讲述了vue.js实现数据库的JSON数据输出渲染到html页面功能。分享给大家供大家参考,具体如下:1、首先通过json.php把数据库给输出为jso
这次给大家带来vue-cli3.0配置及使用详解,写给需要的朋友。VueCLI是一个基于Vue.js进行快速开发的完整系统,提供:通过@vue/cli搭建交互式
什么是Vue.js?Vue.js是用于构建交互式的Web界面的库。Vue.js提供了MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。Vue.js
什么是Vue.js?Vue.js是用于构建交互式的Web界面的库。Vue.js提供了MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。Vue.js