鸡汤来咯开发学习笔记-21

1.完成edit页面的样式

.editLayout{

padding: 30rpx;
.head{
    padding: 20rpx 0;


    .title{
        font-size: 34rpx;
        padding: 20rpx;
        padding-bottom: 6rpx;
        position: relative;
        &::before{
            content: "";
            display: block;
            width: 8rpx;
            height: 30rpx;
            background: $brand-theme-color;
            position: absolute;
            left: 0;
            top: calc(50% - 15rpx);
            border-radius: 10rpx;
            
        }
    }
    .subTitle{
        font-size: 26rpx;
        color: $text-font-color-3;
    }
 }
.body{
    .radio{
        margin-right: 30rpx;
        radio{
            transform: scale(0.9);
        }
    }
    .soupContent
    {
        border: 1rpx solid $border-color;
        width: 100%;
        height: 400rpx;
        background: #fcfcfc;
        padding: 20rpx;
        border-radius: 10rpx;
        font-size: 50rpx;
    }
        
    .fromIpt{
        border: 1rpx solid $border-color;
        height: 80rpx;
        padding: 0 20rpx;
        border-radius: 10rpx;
        background: #fcfcfc;
    }
}
.btnGroup{
    padding-top: 60rpx;
}

}
2.写入获取数据的方法，在给各个属性进行双向绑定

import { ref } from 'vue';
const formDate =ref({
    soup_type:0,
    content:"",
    from:"",
})

页面绑定（v-model）

    <label>
                            <radio class="radio" value="0" color="#4f9153" :checked="formDate.soup_type==0">毒鸡汤</radio>
                        </label>
                        <label>
                            <radio class="radio" value="1" color="#f83162" :checked="formDate.soup_type==1">心灵鸡汤</radio>
                        </label>
        
<input v-model="formDate.from" class="fromIpt" type="text" placeholder="如:红楼梦"/>
  <textarea v-model="formDate.soupContent" class="soupContent" placeholder="编写你的鸡汤吧"></textarea>