首页Vue.js的axios最新案例，用html写的

Vue.js的axios最新案例，用html写的

时间: 2025-01-19 17:15:08 浏览: 35

好的,我来为您介绍一个使用Vue.js和axios的简单HTML示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.js Axios Example</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <h1>{{ title }}</h1> <button @click="fetchData">获取数据</button> <ul> <li v-for="item in items" :key="item.id">{{ item.title }}</li> </ul> </div> <script> new Vue({ el: '#app', data: { title: 'Vue.js Axios Example', items: [] }, methods: { fetchData() { axios.get('https://jsonplaceholder.typicode.com/posts') .then(response => { this.items = response.data.slice(0, 10); }) .catch(error => { console.error('Error fetching data:', error); }); } } }); </script> </body> </html> ``` 这个示例展示了如何使用Vue.js和axios在HTML页面中获取和显示数据。主要特点包括: 1. 使用CDN引入Vue.js和axios库。 2. 创建一个简单的Vue实例。 3. 定义一个fetchData方法,使用axios.get请求数据。 4. 使用v-for指令遍历并显示获取到的数据。点击"获取数据"按钮时,会向JSONPlaceholder API发送请求,并将返回的前10条数据显示在页面上。

阅读全文