我與VueJs第2天_資料綁定_各種資料型態的操作
第二個我們要來測試Vue
輸出時候的數值性加減跟字串串接的一些寫法有捨麼差異
由此可更強調出雙重大括號主要作用就是傳遞Vue object中的data自訂屬性欄位值
程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="myapp"> <h1>{{message}}</h1> <h1>{{number + 15}}</h1> <p>2 + 3 = {{a}}</p> <p>2 - 3 = {{b}}</p> <p>2 * 3 = {{c}}</p> </div> <script> new Vue({ el:'#myapp', data:{ message:'Hello Vue', number:10, a:5, b:-1, c:6 } }) </script> </body> </html> |
在此除了純數值之外
也可以在雙重大括號中做一些簡單的判斷邏輯操作
注意!!! data 中自定義屬性後頭必須要冒號(:)而非等號不然會有錯
在此我們也能進行像是字串反轉(先分割成字元陣列)
或Boolean值三元運算邏輯等基本操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="myapp"> <h1>{{message}}</h1> <h1>{{number + 15}}</h1> <p>2 + 3 = {{a}}</p> <p>2 - 3 = {{b}}</p> <p>2 * 3 = {{c}}</p> <h1>{{ IsActive ? 'Is active' : 'is not active' }}</h1> <h1>{{strTest.split('').reverse('').join('')}}</h1> </div> <script> new Vue({ el:'#myapp', data:{ message:'Hello Vue', number:10, a:5, b:-1, c:6, IsActive:true, strTest:'abcde' } }) </script> </body> </html> |
留言
張貼留言