「Vue.js」dataオブジェクトのプロパティ名でhref属性を設定する
書式
v-bind:href="プロパティ名"
使用例
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<h1 id="app">
<a v-bind:href="turl">スキル勉強</a>
</h1>
<script>
//Vueのインスタンスを生成
var app = new Vue({
el: '#app',
//dataオブジェクトにturlプロパティを指定
data: {
turl: 'http://www.arkgame.com/'
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<h1 id="app">
<a v-bind:href="turl">スキル勉強</a>
</h1>
<script>
//Vueのインスタンスを生成
var app = new Vue({
el: '#app',
//dataオブジェクトにturlプロパティを指定
data: {
turl: 'http://www.arkgame.com/'
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<h1 id="app">
<a v-bind:href="turl">スキル勉強</a>
</h1>
<script>
//Vueのインスタンスを生成
var app = new Vue({
el: '#app',
//dataオブジェクトにturlプロパティを指定
data: {
turl: 'http://www.arkgame.com/'
}
})
</script>
</body>
</html>