VUE单选框案例测试1（一看就懂）

      

 

<template>

  <div>

      

    <!-- <template>

      <el-alert type="success" title="提示">

        <el-button type="warn">{{ $route.params.id }}</el-button>

        {{ $route.params.name }}

        <el-button type="primary" @click="backIndex()">返回首页</el-button>

        <router-link to="/">返回首页</router-link>

      </el-alert>

    </template> -->

    <el-form :model="form" ref="form" label-width="100px">

      <el-form-item

        label="昵称"

        prop="nickName"

        :rules="[{ required: true, message: '不能为空' }]"

      >

        <el-input

          type="text"

          v-model="form.nickName"

          placeholder="请输入昵称"

        ></el-input>

      </el-form-item>

      

      <el-form-item

        label="密码"

        prop="pwd"

        :rules="[{ required: true, message: '不能为空' }]"

      >

        <el-input

          type="password"

          v-model="form.pwd"

          placeholder="请输入密码"

        ></el-input>

      </el-form-item>

      <el-form-item

        label="年龄"

        prop="age"

        :rules="[

          { required: true, message: '不能为空' },

          { type: 'number', message: '请输入数字' },

        ]"

      >

        <el-input v-model.number="form.age" placeholder="请输入密码"></el-input>

      </el-form-item>

      <el-form-item

        label="邮箱"

        prop="email"

        :rules="[

          { required: true, message: '不能为空' },

          { type: 'email', message: '请输入正确的邮箱' },

        ]"

      >

        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>

      </el-form-item>

      <el-form-item

        label="链接"

        prop="link"

        :rules="[

          { required: true, message: '不能为空' },

          { type: 'url', message: '请输入正确的链接' },

        ]"

      >

        <el-input v-model="form.link" placeholder="请输入链接"></el-input>

      </el-form-item>

      <el-form-item

        label="标题"

        prop="title"

        :rules="[

          { required: true, message: '不能为空' },

          { min: 2, max: 10, message: '字符个数在2~10之间' },

        ]"

      >

        <el-input

          type="text"

          v-model="form.title"

          placeholder="请输入链接"

        ></el-input>

      </el-form-item>

    </el-form>

  </div>

</template>

<script>

export default {

  data() {

    return {

        id:'',

      form: {

        nickName: "",

        pwd: "",

        age: "",

        email: "",

        link: "",

        title: "",

      },

    };

  },

  methods: {

    

  },

  mounted() {

      console.info(this.$route)

    //   this.id=this.$route.query.id;

    this.id=this.$route.params.id;

      console.info(this.id)

  },

};

</script>

单选框  radio.vue 代码

<template>

    <div>

        <el-form :model="form" ref="form" label-width="100px">

            <el-form-item label="昵称" prop="nickName" :rules="[{required:true,message:'不能为空'}]">

                <el-input type="text" v-model="form.nickName" placeholder="请输入昵称"></el-input>

            </el-form-item>

            <el-form-item label="密码" prop="pwd" :rules="[{required:true,message:'不能为空'}]">

                <el-input type="password" v-model="form.pwd" placeholder="请输入密码"></el-input>

            </el-form-item>

            <el-form-item label="年龄" prop="age" :rules="[{required:true,message:'不能为空'},{type:'number',message:'请输入数字'}]">

                <el-input v-model.number="form.age" placeholder="请输入密码"></el-input>

            </el-form-item>

            <el-form-item label="邮箱" prop="email" :rules="[{required:true,message:'不能为空'},{type:'email',message:'请输入正确的邮箱'}]">

                <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>

            </el-form-item>

            <el-form-item label="链接" prop="link" :rules="[{required:true,message:'不能为空'},{type:'url',message:'请输入正确的链接'}]">

                <el-input v-model="form.link" placeholder="请输入链接"></el-input>

            </el-form-item>

            <el-form-item label="标题" prop="title" :rules="[{required:true,message:'不能为空'},{min:2,max:10,message:'字符个数在2~10之间'}]">

                <el-input type="text" v-model="form.title" placeholder="请输入链接"></el-input>

            </el-form-item>

        </el-form>

    </div>

</template>

<script>

// 在js里面，引入上面div标签中的内容。 进行输出。 

export default {

    data() {

        return {

            form:{

                nickName:'',

                pwd:'',

                age:'',

                email:'',

                link:'',

                title:'',

            },

        }

    },

}

</script>