[JavaScript知识库]vue实现参数传递

<template>
    <div>
      <!--登录页面-->
      <div v-if="tag==1">
        <!--账号密码-->
        <lable>用户名：</lable>
        <input type="text" v-model="loginName">

        <lable>密码：</lable>
        <input type="password" v-model="loginPassword">
        <div>
          <button @click="loginFun">登录</button>
          <button @click="zcFun">注册</button>
        </div>
      </div>

      <!--注册页面-->
      <div v-if="tag==2">
        <!--账号密码-->
        <lable>用户名：</lable>
        <input type="text" v-model="zcName">

        <lable>密码：</lable>
        <input type="password" v-model="zcPassword">

        <lable>邮箱</lable>
        <input type="text" v-model="zcEmail">
        <div>
          <button @click="zcLoginFun">注册</button>
          <button @click="backFun">返回</button>
        </div>
      </div>

      <!--展示页面-->
      <div v-if="tag==3">
        <table>
          <thead>
          <th>
            <td>序号</td>
            <td>用户名</td>
            <td>邮箱</td>
          </th>
          </thead>
          <tbody>
          <th>
            <td>{{showMsg.id}}</td>
            <td>{{showMsg.name}}</td>
            <td>{{showMsg.email}}</td>
          </th>
          <th v-for="(item,index) in showMsgList">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.email}}</td>
          </th>
          </tbody>
        </table>

        <button @click="backFun">注销登录</button>
      </div>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "loginAndRe",
      data(){
          return{
            /*登录数据*/
            loginName:"",
            loginPassword:"",
            /*注册数据*/
            zcName:"",
            zcPassword:"",
            zcEmail:"",
            /*展示数据*/
            showMsg:{},
            showMsgList:{},
            /*切换变量*/
            tag:"1"
          }
      },
      methods:{
          /*登录方法*/
          loginFun(){
            if ((this.loginName && this.loginName != "") && (this.loginPassword && this.loginPassword != "")){
              var paramsData={
                name: this.loginName,
                password: this.loginPassword,
              }
              axios({
                method: "post",
                url: "http://localhost:8080/user/login",
                data:paramsData
              }).then(res=>{
                if (res&&res.data.code ==0){
                  this.tag = 3
                  this.showMsg = res.data.data
                  this.showMsgList = [res.data.data]
                }else {
                  alert(res.data.message)
                }
              })
            }else {
              alert("请输入正确的账号密码")
            }
          },
        /*注册切换*/
        zcFun(){
            this.tag = 2
        },
        /*注册方法*/
        zcLoginFun(){
          if ((this.zcName && this.zcName != "") && (this.zcPassword && this.zcPassword != "") && (this.zcEmail && this.zcEmail != "")){
            var paramsData={
              name: this.zcName,
              password: this.zcPassword,
              email: this.zcEmail
            }
            axios({
              method: "post",
              url: "http://localhost:8080/user/save",
              data:paramsData
            }).then(res=>{
              console.log(res)
              if(res&&res.data.code==0){
                alert(res.data.message)
                this.tag = 1
              }
            })
          }else {
            alert("请输入正确的注册参数")
          }
        },
        /*返回方法*/
        backFun(){
            this.tag = 1
        },
      }

    }
</script>

<style scoped>

</style>