效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/vue@next"></script> <style> *{ box-sizing: border-box; margin: 0; padding: 0; } html,body{ font-family: Arial, Helvetica, sans-serif; } #app{ width: 400px; height: 100vh; margin: auto; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } h1,h3{ margin-bottom: 1rem; font-weight: normal; } img{ border-radius: 50%; border: 5px #333 solid; margin-bottom: 1rem; } .male { border-color: steelblue; background-color: steelblue; } .female{ border-color: pink; background-color: pink; color: #333; } button { cursor: pointer; display: inline-block; background: #333; color: white; font-size: 18px; border: 0; padding: 1rem 1.5rem; } button:focus{ outline: none; } button:hover{ transform: scale(0.98); } </style> </head> <body> <div id="app"> <img v-bind:src="picture" :alt="`${firstName} ${lastName}`" :class="gender"> <h1>{{firstName}} {{lastName}}</h1> <h3>Email: {{email}}</h3> <button :class="gender" @click="getUser()">Get Random User</button> </div> <script> const app =Vue.createApp({ data(){ return { firstName : 'John', lastName: 'Doe', email: 'john@gmail.com', gender:'male', picture:'https://randomuser.me/api/portraits/men/18.jpg' } }, methods:{ async getUser(){ const res =await fetch('https://randomuser.me/api') const {results} = await res.json(); console.log(results) this.firstName = results[0].name.first this.lastName = results[0].name.last this.email = results[0].email this.gender = results[0].gender this.picture = results[0].picture.large } } }) app.mount("#app") </script> </body> </html>