Vue.js 存储分类表单数据 - 踏得网

Storing Grouped Form Data with Vue JS

Vue.js

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2759
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<link rel="stylesheet prefetch" href="https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<h1> </h1>
<div class="container">
    <form class="row">
        <div class="col-xs-12 col-md-6">
            <h6>Person 1</h6>
            <hr/>
            <div class="form-group">
                <label>First Name</label>
                <input type="text" v-model="form[0].firstName" class="form-control" />
            </div>
            <div class="form-group">
                <label>Last Name</label>
                <input type="text" v-model="form[0].lastName" class="form-control" />
            </div>
        </div>
        <div class="col-xs-12 col-md-6">
            <h6>Person 2</h6>
            <hr/>
            <div class="form-group">
                <label>First</label>
                <input type="text" v-model="form[1].firstName" class="form-control" />
            </div>
            <div class="form-group">
                <label>Input 2</label>
                <input type="text" v-model="form[1].lastName" class="form-control" />
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <pre v-show="form"><code> 
Data object is:
 
{{ form | json }}</code></pre>
                <h5 v-else="v-else" class="text-xs-center p-t-1">No data yet... Fill out the form</h5>
            </div>
        </div>
    </form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>