我與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>

















留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題