Vue.js例

a要素を設置して、Vue.js公式サイトへのリンク作成し、
dataオプションにurlプロパティを作成、初期値はhttps://jp.vuejs.org/
a要素の属性hrefに、v-bindを使ってrulプロパティの値をデータバインディングします。

 

index.html (body部のみ)

<div id="app">

    <p>

        <a v-bind:href="url">Vue.js</a>

    </p>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

 

index.js

var app = new Vue({
    el: '#app',
    data: {
        url: 'https://jp.vuejs.org/'
    }
})

 

 

検証ツール

 

gyazo.com

 

 

 

 

dataオプションに真偽値が入るプロパティtoggleを定義し、初期値はtrueとします。
toggleがtrueならVue.js公式サイトへのリンクを表示し、falseならVue.js公式サイトへのリンクを非表示にします。

 

inde.html

<div id="app">

    <p v-if="toggle">

        <a v-bind:href="url">Vue.js</a>

     </p>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 

 

index.js

var app = new Vue({
    el: '#app',
    data: {
        url: 'https://jp.vuejs.org/',
        toggle: true
    }
})

 

検証ツール

gyazo.com

 

toggle属性の値をfalseにするとリンクが消えます。

gyazo.com