【React】Reactで双方向バインディング!テキスト入力して、即座に変数を変えてる方法!
momeq
muchi-no-chi
*当ブログではアフェリエイト広告を利用しています。
今回は、vue3のComposition APIでリアクティブな変数を作っていきます。
これまでのoptions APIと異なり、「ref」をインポートする必要があります。
Vue3のバージョンが上がり、少しリアクティブの使い方が変わりました。
options APIとかvue2だと「data」を使っていたのですが、今の書き方だとシンプルに書けるようになり、dataは使いません。
リアクティブなシステムはvueには不可欠なので、新しく導入されている「ref」については、是非覚えてくださいね。
まずは、refの使い方を確認します。
import {ref} from “vue”
const 変数名 = ref<型>(初期値)
変数名.value
基本はこれだけだにゃ。インポートして、変数にしたい値をrefで囲うだけだにゃ。
あとは、アクセスするときはvalueでアクセスするから、忘れちゃダメだにゃ。
参考になればと思い、いくつか基本的な使い方を載せておきます。
書き方は、vue3のComposition APIに準拠しています。
<script setup lang="ts">
import {ref} from "vue" //インポート
const number = ref<Number>(0); //定義
const handleClickAdd = () => number.value++; //値にアクセス
</script>
<template>
<div class="container">
<p>{{number}}</p>
<button @click="handleClickAdd">add+</button>
</div>
</template>
<style scoped>
.container{
width: 100%;
text-align: center;
}
</style>
<script setup lang="ts">
import {ref} from "vue" //インポート
const open = ref<Boolean>(true); //定義
const handleClickAdd = () => open.value = !open.value; //値にアクセス
</script>
<template>
<div class="container">
<button @click="handleClickAdd">click</button>
<p v-if="open">open</p>
</div>
</template>
<style scoped>
.container{
width: 100%;
text-align: center;
}
</style>
<script setup lang="ts">
import {ref} from "vue" //インポート
const items = ref<Array<String>>([]); //定義
const text = ref<String>(""); //定義
const handleClickAdd = () => {
items.value.push(text.value); //アクセス
};
</script>
<template>
<div class="container">
<input type="text" placeholder="文字を入力" v-model="text">
<button @click="handleClickAdd">Add</button>
<ul>
<li v-for="item in items" :key={item}>{{item}}</li>
</ul>
</div>
</template>
<style scoped>
.container{
width: 100%;
text-align: center;
}
</style>
独学で苦戦している人は、一度しっかりと基礎を学ぶと次のステップへ進めますよ。今のおすすめは、TechAcademy(テックアカデミー)ですね。
無料体験や相談もあるから、一度試してみてもいいんだにゃ!
\無料体験、無料相談はこちらから/