我與VueJs第2天_資料綁定part2_HTML TAG屬性的綁定v-bind



既然Vue這麼神通廣大
那如果是<a>  連結的Tag應該也能夠相同方式綁定吧


<a href="要連結的 URL 放這裡" target="連結目標" title="連結替代文字">要顯示的連結文字或圖片放這裡</a>

程式碼

 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
<!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">
        <a href="{{url}}">{{url}}</a>
    </div>

    <script>
        new Vue({
            el: '#myapp',
            data:{
                url: 'https://tw.yahoo.com/'
            }
        })


    </script>

</body>
</html>


看起來有產生Link了



只是當我一點就報錯....



這裡必須改用v-bind方式來做資料綁定

程式碼


 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">
        <a href="https://tw.yahoo.com/">Yahoo首頁</a>
        <br/>

        <!--VueJs錯誤連結綁定寫法-->>
        <a href="{{url}}">Yahoo首頁</a>
        <br/>
        <!--寫法1-->>
        <a v-bind:href=url>Yahoo首頁</a>
        <br/>
        <!--寫法2-->>
        <a :href=url>Yahoo首頁</a>
    </div>

    <script>
        new Vue({
            el: '#myapp',
            data:{
                url: 'https://tw.yahoo.com/'
            }
        })


    </script>

</body>
</html>

在此可以看到一開始犯的錯誤最終Vue渲染出來的html tag
並非我們一般所想的

正確綁定方式透過v-bind: (或直接一個冒號) 加在目標tag的屬性前方





這邊要小心注意
在前一文章示範的雙括號目標都是html tag 裡面的並沒有涉及tag中的屬性
若要綁定的目標是隸屬於 html tag當中的屬性為資料時,就必須透過v-bind語法。


這裡多針對一個  h1  tag 來示範
(一般)針對Tag外尖括號包覆的部分綁定
v.s
(較特別)針對Tag 屬性的綁定

程式碼


 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
38
39
40
41
42
43
<!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">
        <a href="https://tw.yahoo.com/">Yahoo首頁</a>
        <br/>

        <!--VueJs錯誤連結綁定寫法-->>
        <a href="{{url}}">Yahoo首頁</a>
        <br/>
        <!--寫法1-->>
        <a v-bind:href=url>Yahoo首頁</a>
        <br/>
        <!--寫法2-->>
        <a :href=url>Yahoo首頁</a>
        <br/>

        <h2>{{Msg1}}</h2>
        <h2 :data=Msg2>{{Msg1}}</h2>
    </div>

    <script>
        new Vue({
            el: '#myapp',
            data:{
                url: 'https://tw.yahoo.com/',
                Msg1: '被尖括號包覆的內容綁定',
                Msg2: 'Tag中屬性的內容綁定'
            }
        })


    </script>

</body>
</html>


效果


留言

這個網誌中的熱門文章

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

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

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