# Vue雙向綁定(1-1) ###### tags: `Vue`、`1. 快速入門 Vue.js ` 2022.2.28 圖片: v-bind:src="data圖片網址" 輸入文字: v-model="data位置" 點擊按鈕: v-on:click="函式" ``` <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script src="https://unpkg.com/vue@3"></script> </head> <body> <div id="app"> <div class="mb-3"> <label for="productName" class="form-label">產品名稱</label> <input type="text" id = "productName" class="form-control" v-model="temp.name"> </div> <div class="mb-3"> <img v-bind:src="temp.imageUrl" alt="" class="img-fluid"> <label for="productImage" class="form-label">產品圖片</label> <input type="text" id="productImage" class="form-control" v-model="temp.imageUrl"> </div> <button type="button" class="btn btn-secondary" v-on:click="confirmEdit">更新</button> </div> <script> const App = { data(){ return{ temp:{ name:'', imageUrl:'https://images.unsplash.com/photo-1602526430780-782d6b1783fa?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' } } }, methods:{ confirmEdit(){ console.log(this.temp); } } } Vue.createApp(App).mount('#app') </script> </body> <link rel="stylesheet" href="/stylesheets/all.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> </html> ```