携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

前言:

收集表单数据 ● 若

<input type="text"/>

，则v-model收集的是value值，用户输入的内容就是value值
● 若

<input type="radio"/>

，则v-model收集的是value值，且要给标签配置value属性

●若<input type="checkbox"/>

○ 没有配置value属性，那么收集的是checked属性（勾选 or 未勾选，是布尔值）
○ 配置了value属性 v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
v-model的初始值是数组，那么收集的就是value组成的数组

实例:

下面我用一个实际样例给大家展示一下.\

html部分:

        <!-- 创建列表 -->
        <div class="createcollect" v-if="createcollect_flag">
            <div class="title">
                <h1>新建收藏集</h1>
            </div>
            <div class="form">
                <form @submit.prevent="commit_newcollect">
                    <span class="nametext"> 名称:</span>
                    <input type="text" v-model="newcollect.name" class="nameinput"><br>
                    <span class="describetext"> 描述:</span>
                    <textarea v-model="newcollect.describe" class="describeinput"></textarea><br>
                    <input type="radio" name="power" v-model="newcollect.powerpublic" value=true class="radiotrue">
                    <span class="powerpublictext1">公开 当其他人关注此收藏集后不可再更改为隐私</span><br>
                    <input type="radio" name="power" v-model="newcollect.powerpublic" value=false class="radiofalse">
                    <span class="powerpublictext2">隐私 仅自己可见此收藏集</span><br>
                    <button @click.prevent="change_createcollect" class="buttonleft">取消</button>
                    <button class="buttonright">确定</button>
                </form>
            </div>

        </div>

js部分:

  data() {
        return {
           
            collcectlist_this: this.collcectlist,/*渲染的数据*/
            createcollect_flag: false,
            newcollect: {
                name: '',
                describe: '',
                powerpublic: true,
            }
        }
    },
    
      change_createcollect() {
            this.createcollect_flag = !this.createcollect_flag;
        },
        
           commit_newcollect() {//将新的收藏集渲染
            //将新的收藏集加入到列表中,并返回初始选择页面.
            var newcollect_this = { name: this.newcollect.name, powerpublic: this.newcollect.powerpublic, collect_num: 0, text_num: 0, };
            this.collcectlist_this.push(newcollect_this);
            this.change_createcollect();
        },

css部分无足轻重在此就不多赘述,代码的重点在于html和js.

效果图:

我们的表单的提交事件绑定了js中的 commit_newcollect(),在该函数中创建一个新的收藏集对象,将收集到的数据加入collcectlist_this列表中,然后再执行change_createcollect()函数去隐藏该页面. 然后就漏出了该组件的另一个页面.该页面与文章无关故具体代码不再演示.

该页面渲染数据来自之前页面的collcectlist_this列表,也就是成功的将新建的收藏集加入到了收藏集列表中了. 而之前页面的

<button @click.prevent="change_createcollect" class="buttonleft">取消</button>

取消按钮使用修饰符prevent阻止了表单的提交,只执行change_createcollect函数,从而只关闭页面不更改收藏列表数据.

在vue中如何使用表单收集数据.

前言:

实例:

html部分:

js部分:

效果图: