【Vue.js】v-bindでリンク・画像のhref属性/src属性にコンポーネントの文字列を代入する(CDN版)

Vue.JSでは{{変数名}}でVueインスタンスの変数の内容をwebページ上に表示させることができますが、これはFlaskのJinja2と違って、imgタグやaタグに<img src={{変数名}}> <a href={{変数名}}>とするとレンダリングエラーになります。Vue.jsでは、こういう場合にはv-bindを使用しないといけません。

というわけで、今回はVue.JS(CDN版)でv-bindでリンク・画像のhref属性/src属性にコンポーネントの文字列を代入する方法について紹介したいと思います。

v-bindでリンク・画像のhref属性/src属性にコンポーネントの文字列を代入する

<サンプルコード>

<html>
<head>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js'></script>
<script src='https://unpkg.com/axios/dist/axios.min.js'></script>
</head>
<body>
<div id='app'>
<p> {{ info.title }} </p>
<a v-bind:href="info.url"> 記事リンク</a>
<img v-bind:src="info.img" />
</div>
</body>
</html>
<script>
const app = new Vue({
el: '#app',
data: {
info:
{title:'【Vuejs】CDN版でクリックイベントで現在の日付時刻を取得するボタンを作る',
url: 'https://tkstock.site/2022/06/19/vue-js-datetime-onclick-button/',
img: 'https://tkstock.site/wp-content/uploads/2022/06/vue.js.png',
}
}

})
</script>

<実行結果>