uniApp中v-model结合form表单的小案例

<template>
    <view>

        ------tab切换小案列--------------------------

        <view class="outer">
            <view class="inner" :class="myindex==index?'active':''" v-for="(item,index) in arr" :key="index"
                @click="changeTab(index)">{{item}}
            </view>
        </view>

        ----------------v-model双向数据绑定小案例-------------------


        <view>标题：<text @click="changeTitle">{{title}}</text></view>
        <input type="text" v-model="title" class="inp" />


        ----------------v-model结合form表单小案例----------------------


        <view class="out">
            <view class="in">
                <input type="text" placeholder="请输入姓名..." class="border" v-model="message.username" />
            </view>
            <view class="in">
                <input type="text" placeholder="请输入电话..." class="border" v-model="message.tel" />
            </view>
            <view class="in">
                <textarea class="border" placeholder="请输入信息..." v-model="message.des"></textarea>
            </view>
        </view>
        <button type="primary" @click="submit">提交</button>

        {{message.username}}---{{message.tel}}---{{message.des}}


    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: "月色尚浅",
                myindex: 0,
                arr: ["苹果", "香蕉", "石榴", "草莓"],
                message: {
                    username: '',
                    tel: '',
                    des: ''
                }
            }
        },
        methods: {
            changeTab(e) {
                this.myindex = e
            },
            changeTitle() {
                this.title = Math.random() * 100
            },
            submit() {
                console.log(this.message)
            }
        }
    }
</script>

<style lang="scss">
    .outer {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .inner {
            flex: 1;
            line-height: 90rpx;
            background: lightgray;
            text-align: center;

            &.active {
                background: lightblue;
                color: white;
            }
        }
    }

    .inp {
        border: 1px solid lightgray;
        margin-top: 30rpx;
    }

    .out {
        padding: 10rpx;
        margin: 10rpx 0rpx;
        box-sizing: border-box;

        .in {
            .border {
                border: 1px solid lightgray;
                padding: 10rpx;
                margin: 10rpx 0rpx;
            }
        }
    }
</style>