v-model 指令在表單控件元素上創建雙向數據綁定,所謂雙向綁定，指的就是我們在js中的vue實例中
的data與其渲染的dom元素上的內容保持一致，兩者無論誰被改變，另一方也會相應的更新為相同的數據
最基礎的就是實現一個聯動的效果
vue v-bind綁定屬性和樣式
這期跟大家分享的，是v-bind指令。它可以往元素的屬性中綁定數據，也可以動態地根據數據為元素綁定不同的樣式。
綁定屬性
最簡單的例子，我們有一張圖片，需要定義圖片的src。我們可以直接在元素的屬性里面定義：
<div id="app"> <img src="https://cn.vuejs.org/images/logo.png" alt=""> </div> <!-- ... ... --> <script type="text/javascript"> var app = new Vue({ el: '#app' }); </script>但是在實際工作中，我們通常會遇到的情況是，圖片地址是從數據里返回的，這個時候v-bind指令就派上了用場。當然，我們可以同時綁定各種屬性：
<div id="app"> <img v-bind:src="imgSrc" v-bind:alt="imgAlt" v-bind:title="imgTitle"> </div> <!-- ... ... --> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { imgSrc: 'https://cn.vuejs.org/images/logo.png', imgAlt: 'vue-logo', imgTitle: '這是你指定的title，主人' } }); </script>在瀏覽器可以看到效果：
這時候你也許會說，每次都要寫一遍v-bind好麻煩。沒問題，Vue為你准備好了簡寫的方式：
<div id="app"> <img :src="imgSrc" :alt="imgAlt" :title="imgTitle"> </div>綁定行內樣式
v-bind也可以用於綁定樣式，使用行內樣式時，關鍵字是style，跟在html里面直接寫行內樣式類似。注意樣式的寫法跟css會有些許不同，橫杠分詞變成駝峰式分詞。
<div id="app"> <button class="btn" :style="{ color: 'white', backgroundColor: 'blue' }">點擊我吧，主人！</button> </div>當然，把樣式寫在vue的data里面會方便一些：
<div id="app"> <button class="btn" :style="styles">點擊我吧，主人！</button> </div> <!-- ... ... --> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { styles: { color: 'white', backgroundColor: 'blue' } } }); </script>在瀏覽器中可以看到html中的行內樣式：
綁定CSS樣式
更常見的做法肯定是根據數據綁定不同的樣式了。這時關鍵字是class。【注意：v-bind:class指令可以與普通的class特性共存】
<style> .is-active { color: white; background-color: green; } </style> <body> <div id="app"> <!-- 根據數據中isActive來決定是否把is-active這個class加給元素 --> <button class="btn" :class="{ 'is-active': isActive }">點擊我吧，主人！</button> </div> <!-- ... ... --> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { isActive: true } }); </script> </body>效果如圖：
當然，在實際工作中isActive的值一般不會像例子中這樣直接寫死，而是根據用戶的交互或者數據進行判斷。
傳遞靜態或動態 Prop
像這樣，你已經知道了可以像這樣給 prop 傳入一個靜態的值：
<blog-post title="My journey with Vue"></blog-post>你也知道 prop 可以通過 v-bind 動態賦值，例如：
<!-- 動態賦予一個變量的值 --> <blog-post v-bind:title="post.title"></blog-post> <!-- 動態賦予一個復雜表達式的值 --> <blog-post v-bind:title="post.title + ' by ' + post.author.name" ></blog-post>