vue學習(七) v-model 雙向數據綁定

//html
<div id="app">
　　　　<input type="text"v-model="msg" style="width:100%">
</div>

//script
<script>
　　var vm = new Vue({
　　　　el:'app',
　　　　data:{
　　　　　　msg:'點擊一下'
　　　　}
　　})
</script>

說明：

v-bind只能實現數據的單向綁定 從model 自動綁定到 view中，沒法實現數據的雙向綁定

v-model指令能夠實現 表單元素和model中數據的雙向綁定 v-model只能運用在表單元素中，即除了可以實現數據從model渲染到到view，也能實現從view中道model中去

 

效果：

頁面渲染完成以後，會有一個點擊一下 和一個input，input的內容是點擊一下   修改input中的值，頁面上的點擊一下 會隨着input內容的變化而變化