<div id="app">
<button v-on:click="urlGoogle()">urlをGoogleに変更</button>
<button v-on:click="urlYahoo()">urlをYahooに変更</button>
<a v-bind:href="url">{{ urlTitle }}</a>
</div>*{
text-align:center;
}
a{
display:block;
margin-top:20px;
} new Vue({
el: "#app",
data: function () {
return {
url: "#",
urlTitle: "ボタンをクリックするとURLが変わるよ！",
};
},
methods: {
urlGoogle: function () {
this.url = "https://www.google.com/";
this.urlTitle = "Google";
},
urlYahoo: function () {
this.url = "https://www.yahoo.co.jp/";
this.urlTitle = "Yahoo";
},
},
});
External CSS
This Pen doesn't use any external CSS resources.