iT邦幫忙

2022 iThome 鐵人賽

DAY 7
0
自我挑戰組

從零開始Vuejs系列 第 7

[Day7] v-model 與雙向綁定

  • 分享至 

  • xImage
  •  

今天是第七天,我想分享一下雙向綁定與v-model這個指令

那我們先來聊聊雙向綁定,雙向綁定是當資料產生變動的時候,原始資料也會跟著做變動,
然後會渲染到畫面上,可讀取可寫入

開始寫程式吧

這裡是HTML的部分

<div id="app">
    <input type="text" v-model="message">
    {{message}}
</div>

這裡是JS的部分

<script>
    const app = {
    data(){
        return{
            message:'你想要吃奇異果嗎?'
            }
        }
    }
Vue.createApp(app).mount('#app')
</script>

然後在瀏覽器中更改HTML的文字JS也會隨之更改
https://ithelp.ithome.com.tw/upload/images/20220919/201510068ZLUlcZcYM.png

更改後
https://ithelp.ithome.com.tw/upload/images/20220919/20151006VjtLSUlmXw.png

v-model 與雙向綁定分享到這邊,我們第八天見


上一篇
[Day6] Vue.js簡單應用
下一篇
[Day8] v-bind屬性綁定
系列文
從零開始Vuejs30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言