今回はVu.jsの勉強第２弾！
属性を書き換えてみよう！ということで、Vue.jsを使ってid名やclass名を書き換えてみましょう。
Vue.jsで属性を書き換える
今回は、classでblueとしている部分をVue.jsでredというclassに書き換えてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue.jsテスト</title>
</head>
<body>
<style>
.blue{
color: blue;
}
.red{
color: red;
}
</style>
<div id="app">
<div class="blue">てきすとだよ</div>
</div>
</body>
</html>
この状態だとまだVue.jsは書いていないので、そのまま青色でテキストが表示されます。
では、早速Vue.jsを書いてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue.jsテスト</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <!-- Vue.jsの読み込み -->
</head>
<body>
<style>
.blue{
color: blue;
}
.red{
color: red;
}
</style>
<div id="app">
<div v-bind:class="blue">てきすとだよ</div> <!-- divのclassをVueでバインドする -->
</div>
<script type="text/javascript">
const app = new Vue({
el: "#app", //IDを指定
data: {
blue: "red" //指定個所を指定の名前に変更
}
});
</script>
</body>
</html>
「bind」には、結び合せるなどの意味があります。
属性を書き換える際には「テキストを表示させてみよう【Vue.js入門】」で使用した「{{指定}}」は使用できないので注意しましょう。
「{{指定}}」この指定は、htmlのタグ内でしか使用できないので注意！
今回は「v-bind」さえ覚えれば前回と同じやり方で簡単に書き換えることができます！
まだ実戦で使えるレベルではないですが、１つずつ使い方を覚えていこう！
ひとまず今回はここまで！
ABOUT ME
