Z## html" title=vue>vue个人中心的制作
个人中心的制作

在实际开发里面，经常会有一些登录页需要进行编写，例如下面这些类型

而这些版面的制作，比较讲究的是思路问题

例如我们想要制作一个登录页，点击就可以输入名字，并且修改名字

整体思路：我们可以先把整体拆分成两个部分，当前展现在浏览器页面的，以及加了点击事件以后，隐藏的部分，而在这个过程中，我们会用到html" title=vue>vue的大部分指令
需要用到v-show 、v-on 、v-bind、v-model等，
具体用法可以查看Vue指令大全

第一步：我们先在把展现在浏览器页面、暂时隐藏的内容，分为两个盒子，

第二步：然后使用v-show，将其隐藏，写在Js的data里面

同时设置，隐藏的input里面的内容，与呈现在浏览器的内容是一致的，只需要增加一个变量，然后进行赋值就可以了

第三步：搞定完隐藏内容以后，我们需要进行设置点击事件以此达到切换效果，首先，我们会在最外面的“修改”进行绑定事件，使用v-on（可以简写为@，绑定的方法定义在methods属性中，方法内部通过this关键字可以访问定义在data中数据）

然后在js里面，写上方法，点击按钮就可以让原来呈现在页面的内容隐藏掉，原来隐藏的内容显示出来

第四步
等我们看到隐藏的内容以后，那肯定有一步是要回到之前的状态的，那我们只需要又在按钮里面绑定点击事件，然后使用v-for进行隐藏和显示

  <li class="nick-name">
                            <div class="label">
                                <p>名字</p>
                            </div>
                            <div class="disable-text">
                                <div class="box" v-show="nicknameShow">
                                    <p>{{nickname}}</p>
                                    <el-button type="text" @click="inputShow()">修改</el-button>
                                </div>
                                <div class="btn" v-show="nicknameInputShow">
                                    <input type="text" :value="nickname">
                                    <el-button @click="nameShow()">取消</el-button>
                                    <el-button type="primary" @click="save()">保存</el-button>
                                </div>
                            </div>
                        </li>

<script>
export default {
    name: "personalCenter",
    data () {
        return {
            nickname:'宋佳佳',
            nicknameShow:true,
            nicknameInputShow:false
        }
    },
    methods: {
        inputShow () {
            this.nicknameShow = false;
            this.nicknameInputShow = true;
        },
        nameShow () {
            this.nicknameShow = true;
            this.nicknameInputShow = false;
        },
        save () {
            this.nickname = "";
            this.nameShow()
        }
    }


}

</script>