Vue.js

by hira3

HTML

<H1>Vue.js</H1>

<div id="inputForm">
<div class="readout">
    <h3>ViewModel の値</h3>
    <table>
        <tr>
            <td class="label">テキスト値:</td>
            <td>{{stringValue}}</td>
        </tr>
        <tr>
            <td class="label">パスワード:</td>
            <td>{{passwordValue}}</td>
        </tr>
        <tr>
            <td class="label">真偽値:</td>
            <td>{{booleanValue}}</td>
        </tr>
        <tr>
            <td class="label">選択された値:</td>
            <td>{{selectedOptionValue}}</td>
        </tr>
        <tr>
            <td class="label">選択された値 (複数選択):</td>
            <td>{{multipleSelectedOptionValues}}</td>
        </tr>
        <tr>
            <td class="label">ラジオボタンの選択された値:</td>
            <td>{{radioSelectedOptionValue}}</td>
        </tr>
    </table>
</div>
  
<h3>Form 部品</h3>
<table>
    <tr>
        <td class="label">テキスト値 (タイプ時に更新):</td>
        <td><input v-model="stringValue" /></td>
    </tr>
    <tr>
        <td class="label">テキスト値 (複数行):</td>
        <td><textarea v-model="stringValue"></textarea></td>
    </tr>
    <tr>
        <td class="label">パスワード:</td>
        <td><input type="password" v-model="passwordValue" /></td>
    </tr>
    <tr>
        <td class="label">チェックボックス:</td>
        <td><input type="checkbox" v-model="booleanValue" /></td>
    </tr>
    <tr>
        <td class="label">ドロップダウンリスト:</td>
        <td>
        <select v-model="selectedOptionValue">
          <option v-for="option in optionValues">{{ option }}</option>
        </select>
        </td>
    </tr>
    <tr>
        <td class="label">複数選択リスト:</td>
        <td>
          <select multiple="multiple" v-model="multipleSelectedOptionValues">
            <option v-for="option in optionValues">{{ option }}</option>
          </select>
        </td>
    </tr>
    <tr>
        <td class="label">ラジオボタン:</td>
        <td>
            <label><input type="radio" value="Alpha"
            v-model="radioSelectedOptionValue" />Alpha</label>
          ...

CSS

body { font-family: arial; font-size: 14px; }
.readout { width: 45%; float: right; }
.readout td { width: 50%; }
tr { vertical-align: top }
td { padding: 0.2em 0.2em 0.6em 0.2em; }
td.label { text-align: right; padding-right: 0.5em; }
input[type=radio] { margin: 0 0.25em 0 0.25em }

JavaScript

var demo = new Vue({
    el: '#inputForm',
    data: {
        stringValue: 'こんにちわ',
        passwordValue: 'hogehoge',
        booleanValue : true,
    	  optionValues : ["Alpha", "Beta", "Gamma"],
        selectedOptionValue : "Gamma",
        multipleSelectedOptionValues : ["Alpha", "Gamma"],
        radioSelectedOptionValue : "Beta"
    },
});