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/'
}
})
検証ツール
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
}
})
検証ツール
toggle属性の値をfalseにするとリンクが消えます。