首页使用vue.js+jquery的ajax从goods.json中获取商品, 并渲染到界面上

使用vue.js+jquery的ajax从goods.json中获取商品, 并渲染到界面上

时间: 2024-09-26 18:12:53 浏览: 126

详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

整理文档，搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码，稍微整理精简一下做下分享。废话不多说，直接上代码 html代码 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>demo</title> [removed][removed] [removed][removed] </head> <body> <div id=app> {{message }}<br> <bu

在Vue.js项目中结合jQuery的Ajax功能从`goods.json`文件获取数据并展示到界面，首先需要确保已经安装了必要的库。以下是步骤： 1. **安装依赖**: - Vue.js可以通过npm或yarn安装。 - 如果项目中还没有集成jQuery，可以在HTML头部引入CDN链接或者通过npm安装(`npm install jquery`然后在入口文件`main.js`中导入)。 ```html <!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue@latest"></script>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  </head> <body> <div id="app"> <ul v-for="(item, index) in goods" :key="index"> <li>{{ item.name }} - {{ item.price }}</li> </ul> </div> <script src="main.js"></script>  </body> </html> ``` 2. **创建Vue实例**: 在`main.js`中，初始化Vue应用，并设置数据响应式以便于更新视图。 ```javascript // main.js import Vue from 'vue' import axios from 'axios'; // 或者直接使用axios代替jQuery的Ajax new Vue({ el: '#app', data() { return { goods: [] } }, created() { this.fetchGoods(); }, methods: { fetchGoods() { axios.get('goods.json') // 替换为你的json文件路径 .then(response => { this.goods = response.data; // 将获取的数据赋值给goods数组 }) .catch(error => console.error('Error fetching goods:', error)); } } }); ```

阅读全文