v-model--雙向數據綁定---：class控制樣式--:style
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <h4>{{ msg }}</h4> <!-- v-bind 只能實現數據的單向綁定，從 M 自動綁定到 V， 沒法實現數據的雙向綁定 --> <!-- <input type="text" v-bind:value="msg" style="width:100%;"> --> <!-- 使用 v-model 指令，能夠實現 表單元素和 Model 中數據的雙向數據綁定 --> <!-- 注意： v-model 只能運用在 表單元素中 --> <!-- input(radio, text, address, email....) select checkbox textarea --> <input type="text" style="width:100%;" v-model="msg"> </div> <script> // 建立 Vue 實例，獲得 ViewModel var vm = new Vue({ el: '#app', data: { msg: '你們都是好學生，愛敲代碼，愛學習，愛思考，簡直是完美，沒瑕疵！' }, methods: { } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <style> .red { color: red; } .thin { font-weight: 200; } .italic { font-style: italic; } .active { letter-spacing: 0.5em; } </style> </head> <body> <div id="app"> <!-- <h1 class="red thin">這是一個很大很大的H1，大到你沒法想象！！！</h1> --> <!-- 第一種使用方式，直接傳遞一個數組，注意： 這裏的 class 須要使用 v-bind 作數據綁定 --> <!-- <h1 :class="['thin', 'italic']">這是一個很大很大的H1，大到你沒法想象！！！</h1> --> <!-- 在數組中使用三元表達式 --> <!-- <h1 :class="['thin', 'italic', flag?'active':'']">這是一個很大很大的H1，大到你沒法想象！！！</h1> --> <!-- 在數組中使用 對象來代替三元表達式，提升代碼的可讀性 --> <!-- <h1 :class="['thin', 'italic', {'active':flag} ]">這是一個很大很大的H1，大到你沒法想象！！！</h1> --> <!-- 在爲 class 使用 v-bind 綁定 對象的時候，對象的屬性是類名，因爲 對象的屬性可帶引號，也可不帶引號，因此 這裏我沒寫引號； 屬性的值 是一個標識符 --> <h1 :class="classObj">這是一個很大很大的H1，大到你沒法想象！！！</h1> </div> <script> // 建立 Vue 實例，獲得 ViewModel var vm = new Vue({ el: '#app', data: { flag: true, classObj: { red: true, thin: true, italic: false, active: false } }, methods: {} }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <!-- 對象就是無序鍵值對的集合 --> <!-- <h1 :style="styleObj1">這是一個h1</h1> --> <h1 :style="[ styleObj1, styleObj2 ]">這是一個h1</h1> </div> <script> // 建立 Vue 實例，獲得 ViewModel var vm = new Vue({ el: '#app', data: { styleObj1: { color: 'red', 'font-weight': 200 }, styleObj2: { 'font-style': 'italic' } }, methods: {} }); </script> </body> </html>
相關文章
- 1. Vue學習(3)————————綁定Class綁定Style,雙向數據綁定，dom節點
- 2. vue綁定樣式，class和style
- 3. vue基礎之樣式綁定（class，style）
- 4. Class與style綁定
- 5. Angular數據雙向綁定機制
- 6. 【AngularJS】數據綁定（雙向綁定）
- 7. （六）數據綁定和雙向綁定
- 8. 雙向數據綁定
- 9. AngularJS--雙向數據綁定
- 10. VUE 數據雙向綁定
- 更多相關文章...
- • ASP.NET Web Forms - 數據綁定 - ASP.NET 教程
- • WSDL 綁定 - WSDL 教程
- • Flink 數據傳輸及反壓詳解
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
