1. 2.雙向數據綁定 3.v-if 4.v-show：也是條件渲染指令，和v-if指令不同的是，使用v-show指令的元素始終會被渲染到HTML（但是使用v-if指令的元素如果表達式為假，則不會被渲染到HTML頁面，這裡要註意v-if和v-show的這個區別），它只是簡單地為元素設置CSS的sty ...
1.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vuetest</title> 6 <script type="text/javascript" src="vue.min.js"></script> 7 </head> 8 <body> 9 <!-- view --> 10 <div id="vue_id"> 11 {{message}} <!--文本插值，使用一對大括弧語法，在運行時{{ message }}會被數據對象的message屬性替換--> 12 <br> 13 {{age}} 14 </div> 15 16 <!-- model --> 17 <script type="text/javascript"> 18 var text={ 19 message:"Hello World!", 20 age:16 21 } 22 23 // 創建一個Vue,；連接view和Model 24 new Vue({ 25 el:"#vue_id",//該Vue實例將掛載到<div id="app">...</div>這個元素 26 data:text //data屬性指向Model，data:text表示我們的Model是text對象。 27 }) 28 29 </script> 30 </body> 31 </html>
2.雙向數據綁定
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vuetest</title> 6 <script type="text/javascript" src="vue.min.js"></script> 7 </head> 8 <body> 9 <!-- view --> 10 <div id="app"> 11 <p>{{message}}</p> 12 <input type="text" name="" v-model="message"><!--在Vue.js中可以使用v-model指令在表單元素上創建雙向數據綁定。更改input的內容，p標簽的內容也同時變化，在瀏覽器控制臺中更改exampleData.message的值，input文本框的內容也會發生變化。--> 13 </div> 14 <script> 15 // 這是我們的Model 16 var exampleData = { 17 message: 'Hello World!' 18 } 19 20 // 創建一個 Vue 實例或 "ViewModel" 21 // 它連接 View 與 Model 22 new Vue({ 23 el: '#app', 24 data: exampleData 25 }) 26 </script> 27 </body> 28 </html>
3.v-if
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="app"> 9 <h1>Hello, Vue.js!</h1> 10 <h1 v-if="yes">Yes!</h1><!-- v-if是條件渲染指令，它根據表達式的真假來刪除和插入元素 --> 11 <h1 v-if="no">No!</h1> 12 <h1 v-if="age >= 25">Age: {{ age }}</h1> 13 <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1><!-- indexOf() 方法可返回某個指定的字元串值在字元串中首次出現的位置。 --> 14 </div> 15 </body> 16 <script src="vue.min.js"></script> 17 <script> 18 19 var vm = new Vue({ 20 el: '#app', 21 data: { 22 yes: true,//顯示 23 no: false,//不顯示 24 age: 28,//顯示 25 name: 'keepfool jack' //顯示 26 } 27 }) 28 </script> 29 </html>
4.v-show：也是條件渲染指令，和v-if指令不同的是，使用v-show指令的元素始終會被渲染到HTML（但是使用v-if指令的元素如果表達式為假，則不會被渲染到HTML頁面，這裡要註意v-if和v-show的這個區別），它只是簡單地為元素設置CSS的style屬性。
5.？？不同Vue版本中v-else的不同。
6.v-for
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 </head> 8 9 <body> 10 <div id="app"> 11 <table> 12 <thead> 13 <tr> 14 <th>Name</th> 15 <th>Age</th> 16 <th>Sex</th> 17 </tr> 18 </thead> 19 <tbody> 20 <tr v-for="person in people"><!-- v-for指令基於一個數組渲染一個列表，它和JavaScript的遍歷語法相似：v-for="item in items".items是一個數組，item是當前被遍歷的數組元素。 --> 21 <td>{{ person.name }}</td> 22 <td>{{ person.age }}</td> 23 <td>{{ person.sex }}</td> 24 </tr> 25 </tbody> 26 </table> 27 </div> 28 </body> 29 <script src="vue.min.js"></script> 30 <script> 31 var vm = new Vue({ 32 el: '#app', 33 data: { 34 people: [{ 35 name: 'Jack', 36 age: 30, 37 sex: 'Male' 38 }, { 39 name: 'Bill', 40 age: 26, 41 sex: 'Male' 42 }, { 43 name: 'Tracy', 44 age: 22, 45 sex: 'Female' 46 }, { 47 name: 'Chris', 48 age: 36, 49 sex: 'Male' 50 }] 51 } 52 }) 53 </script> 54 55 </html>
