v-show显示组件,alert提示示范
xuexi 2023-09-24 22:28:05 发表在:PHP 查看数:998
 <template>
<!-- v-show条件展示alert -->
<a-alert type="error" v-show="zhanshi"   
      message=  "用户名或者密码错误"  
      banner="false"
      closable 
    />
 </template>   

在js的data的return,需要

  zhanshi:false
 方法内写
 ```js
   this.zhanshi=true;

完整代码

  <script>
 import axios from 'axios';//引入axios进来
export default{ 
    data(){
        return{
            duixiang:{
                username:"",
                password:""
            } ,
            zhanshi:false
        }
    },
    methods: {
        submit() {
             axios({
                 method: 'get',url: 'http://server.yaanbbs.net/api/login',
                 params: {
                    username:this.duixiang.username,
                    password:this.duixiang.password
                 }
                 }).then(res=>{
                     console.log(res.data.username);
                     if(res.data.code ==="ok"){
                        localStorage.setItem("username",res.data.username); //将用户名存入缓存

                        // localStorage.removeItem('username');   
                        localStorage.setItem('token', res.data.toke);
                        // localStorage.clear();//删除所有值
                        this.$router.push({name:'index'})
                       }else{
                        // 这个做法不错,简单有效,就是low点
                       // alert("用户或密码错误");
                       this.zhanshi=true;

                       }
                },
                 err=>{
                    console.log(err);
                 })

            }
      }

    }
    </script>
最近访问时间:2025-06-05 20:22:24
知识库:352条鸣谢:TAY  备案号:蜀ICP备2024090044号-2