Vue.js - href、methods、template

Posted on Edited on In Views: Disqus:

 

一、:href

<!DOCTYPE html>
<html>

<head>
    <title>Welcome to Vue</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
    <div id="app">
        <a :href="googleUrl">google</a>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                googleUrl: 'https://www.google.com.tw/'
            }
        })
    </script>
</body>

</html>

說明：

1、在 :href 屬性裡可放置 Vue 物件所定義的 data。

2、:href 是 v-bind:href 的簡寫。

3、不只是 :href 屬性，像是 :id、:src...等等，tag 的屬性只要想和 vue.data 連結，都可這樣做。

 

二、methods

<!DOCTYPE html>
<html>

<head>
    <title>Welcome to Vue</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
    <div id="app">
        <a :href="googleUrl">{{ GetUrl() }}</a>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                googleUrl: 'https://www.google.com.tw/'
            },
            methods: {
                GetUrl: function () {
                    return "https://www.google.com.tw/"
                }
            }
        })
    </script>
</body>

</html>

說明：

在「{{}}」裡面可執行 Vue 物件所定義的方法。

 

三、template

<!DOCTYPE html>
<html>

<head>
    <title>Welcome to Vue</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
    <div id="app">
        <template v-if="character == 'a'">
            <p>I'm a</p>
        </template>
        <template v-else-if="character == 'b'">
            <p>I'm b</p>
        </template>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                character: "b"
            }
        })
    </script>
</body>

</html>

說明：

template 是 vue 所提供的虛擬元素，最常跟 v-if 配合。