Vue.js テキストエリア(textarea)タグの実装サンプル

環境
vue 2.6.14
Google Chrome 106.0.5249.119

書式
1.テキストエリアtextareaタグの定義
<textarea v-model="value"></textarea>
2.Vueインスタンスを作成します

new Vue({
el: '#app',
data: {
value: 初期値,
}

「value:値」を利用してテキストエリアの初期値を設定します
使用例

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<body>

<div id="app">
  テキストエリアのサンプル<br>
  <textarea v-model="value"></textarea>
  <p>{{value}}</p>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      value: 'メモを入力してください',
    },
  });
</script>

</body>
</html>

結果
テキストエリア「textarea」フォームと段落(p)に「メモを入力してください」が表示されます。

Vue.js

Posted by arkgame