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: 初期値,
}
new Vue({
el: '#app',
data: {
value: 初期値,
}
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>
<!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>
<!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)に「メモを入力してください」が表示されます。