2024/02/13 22:13:39

Vue で Form を扱う

Vue で Form を扱うには v-model という機構を利用します。双方向データバインディングと呼ばれるものです。とても簡単です。

以下のHTMLを表示すると、最初にテキストフォームだけが表示されます。フォームに何か入力すると、入力した内容がそのままテキストとして表示されます。

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
<input v-model="text"><br>
{{ text }}
</div>
<script>
var vm = new Vue({
    el: '#example',
    data: {
        text: '',
    },
});
</script>
</body>
</html>

v-model

inupt タグに v-model が書かれています。

<input v-model="text">

v-model の値である text は Vue インスタンスの data にある text プロパティがレンダリングされます。

var vm = new Vue({
    el: '#example',
    data: {
        text: '',
    },
});

textの初期値は空文字列になっています。フォームの値に応じて v-model が自動的にレンダリングしてくれるのです。便利ですね。

v-model でレンダリングされる文字列はあらかじめHTMLエスケープされています。したがって、フォームにHTMLタグが入力されてもブラウザにHTMLとしてレンダリングされることはなく、入力したままの文字列が表示されます。もしもHTMLをHTMLとして表示したい場合はテンプレート構文の {{ text }} を <span v-html="text"></span> という風に v-html を利用することになりますが、セキュリティの問題を産みやすいので、v-htmlは利用しない方がよさそうです。

サイト内検索