Vue.jsによるテキストエリア [textarea]

2019年6月3日

テキストエリア（textarea）を実装します。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
    <style>
        textarea {
            width: 300px;
            height: 80px;
        }
    </style>
</head>

<body>
    <div id="app">
        <textarea v-model="message" placeholder="入力して下さい"></textarea>
        <p style="white-space: pre-line">{{ message }}</p>
    </div>

    <script>

        new Vue({
            el: '#app',
            data: {
                message: ''
            }
        });

    </script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

textarea {

width: 300px;

height: 80px;

}

</style>

</head>

<body>

<p style="white-space: pre-line">{{ message }}</p>

</div>

new Vue({

el: '#app',

data: {

message: ''

}

});

</script>

</body>

</html>

17行目

v-modelディレクティブを利用してデータとバインドしています。

思考の葉

思考の葉

Vue.jsによるテキストエリア [textarea]